Next.js Discord

Discord Forum

Layout breaks after build

Answered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
I'm running into weird issue with my application. When I'm running bun run dev for my app, route /appworks perfectly, by using /app/app/layout.tsx layout for the page, and /app/app/page.tsx as for page content.

The weird thing is, that after building and running bun run preview, /apppath actually shows the root layout and root page.tsx.

If I go and navigate to example /app/parts path, application understands to use layout /app/app/layout.tsx, and appropriate page /app/app/parts/page.tsx.

What might be causing this kind of behavior after the build?
Answered by Asiatic Lion
True thing, seems to be issue with @opennextjs/cloudflare@1.10.1. Downgrading to @opennextjs/cloudflare@1.9.2, build works fine.
View full answer

7 Replies

Asiatic LionOP
Sure thing! "preview": "opennextjs-cloudflare build && opennextjs-cloudflare preview",
Project setup with Cloudflare NextJS template.

// /src/app/layout.tsx
import { TRPCReactProvider } from "@/server/trpc/client";
import { fiFI } from "@clerk/localizations";
import { ClerkProvider } from "@clerk/nextjs";
import { shadcn } from "@clerk/themes";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { RowData } from "@tanstack/react-table";
import type { Metadata } from "next";
import { Oxanium, Source_Code_Pro } from "next/font/google";
import "./globals.css";

const oxaniumSans = Oxanium({
  variable: "--font-sans",
  subsets: ["latin"],
});

const sourceCodeProMono = Source_Code_Pro({
  variable: "--font-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "",
  description:
    ""
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <ClerkProvider
      localization={fiFI}
      appearance={{
        baseTheme: shadcn,
      }}
      afterSignOutUrl="/"
      signInForceRedirectUrl="/app"
      signUpForceRedirectUrl="/app"
    >
      <TRPCReactProvider>
        <html lang="fi" className="dark">
          <body
            className={`${oxaniumSans.variable} ${sourceCodeProMono.variable} antialiased`}
          >
            <main>{children}</main>
          </body>
        </html>
        <ReactQueryDevtools />
      </TRPCReactProvider>
    </ClerkProvider>
  );
}

declare module "@tanstack/react-table" {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  interface ColumnMeta<TData extends RowData, TValue> {
    label?: string;
  }
}
// /src/app/(application)/app/layout.tsx
import { AppSidebar } from "@/components/app-sidebar";
import { CategoryDialog } from "@/components/dialogs/category-dialog";
import { ItemDialog } from "@/components/dialogs/item-dialog";
import { SparePartDialog } from "@/components/dialogs/spare-part-dialog";
import { StorageDialog } from "@/components/dialogs/storage-dialog";
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { ConfirmDialogProvider } from "@/hooks/use-confirm-dialog";

export default function AppLayout({ children }: { children: React.ReactNode }) {
  return (
    <SidebarProvider>
      <AppSidebar />
      <main className="flex-1 overflow-y-auto bg-background p-4 md:p-6">
        <SidebarTrigger className="absolute top-4 right-4 lg:hidden" />
        {children}
      </main>
      <SparePartDialog />
      <ItemDialog />
      <StorageDialog />
      <CategoryDialog />
      <ConfirmDialogProvider />
    </SidebarProvider>
  );
}
alfonsüs ardani
its opennext...
does the problem persist when using next?
Asiatic LionOP
True thing, seems to be issue with @opennextjs/cloudflare@1.10.1. Downgrading to @opennextjs/cloudflare@1.9.2, build works fine.
Answer
alfonsüs ardani
oh thats nice