Next.js Discord

Discord Forum

Page marked as Dynamic even though it's static

Answered
Spinone Italiano posted this in #help-forum
Open in Discord
Spinone ItalianoOP
import Link from "next/link";

export default function FAQPage() {
  const faqs = [
    { q: "test question", a: "test answer" },
  ];

  return (
    <main className="p-6 max-w-3xl mx-auto">
      <Link href="/" className="text-blue-500">← Back to Home</Link>
      <h1 className="text-3xl font-bold my-6">Frequently Asked Questions</h1>

      <div className="space-y-4">
        {faqs.map((f, i) => (
          <div key={i} className="p-4 border rounded">
            <h3 className="font-semibold">{f.q}</h3>
            <p className="text-gray-600">{f.a}</p>
          </div>
        ))}
      </div>

      <div className="mt-8 p-4 border rounded text-center">
        <p className="mb-2">Still have questions?</p>
        <Link href="mailto:support@test.com" className="text-blue-500">
          Contact Support
        </Link>
      </div>
    </main>
  );
}
Answered by joulev
right, await auth() causes it to be dynamic there
View full answer

18 Replies

@joulev this code by itself doesn't make the page dynamic. there must be a different reason, could be: * any of the upper level layouts are dynamic/use dynamic functions * dynamic route segment e.g. `[slug]`
Spinone ItalianoOP
it doesn't appear to be second case to me.
joulev
yes then likely it's due to your app/layout.tsx
Spinone ItalianoOP
Layout.tsx looks like this

import "~/styles/globals.css";

import { type Metadata } from "next";
import { Geist } from "next/font/google";
import { SessionProvider } from "next-auth/react";
import { Analytics } from '@vercel/analytics/react';
import { SpeedInsights } from '@vercel/speed-insights/next';

import { TRPCReactProvider } from "~/trpc/react";
import { auth } from "~/server/auth";

export const metadata: Metadata = {
  title: "foo",
  description: "bar",
  icons: [{ rel: "icon", url: "/favicon.ico" }],
};

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

export default async function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  const session = await auth();

  return (
    <html lang="en" className={`${geist.variable}`}>
      <body>
        <SessionProvider session={session}>
          <TRPCReactProvider>{children}</TRPCReactProvider>
        </SessionProvider>
        <Analytics />
        <SpeedInsights />
      </body>
    </html>
  );
}
joulev
right, await auth() causes it to be dynamic there
Answer
joulev
because you cannot know the auth state during build, the page cannot be rendered during build hence must be dynamic
Spinone ItalianoOP
and i'm quite sure that this causes a lot of my pages to be dynamic, right?
joulev
it causes everything under the layout to be dynamic and since this is the root layout, it causes every page to be dynamic yes
for a page to be static, it and every layout that contains it must all be static
in cases like this i'd just move auth to client components
if i must show the auth state on every page
@joulev if i must show the auth state on every page
Spinone ItalianoOP
to be fair, my faq page doesn't even need to know if it's auth'd or not
nor my ToS page
/ kind of does because if you're auth'd, going to / brings me to /dashboard so in a sense that's needed.
joulev
well now you know what to do
@joulev well now you know what to do
Spinone ItalianoOP
i also have another question and thanks. Is tRPC still used? I started this project using t3 stack because i follow theo channel but this is my first next project.
@Spinone Italiano i also have another question and thanks. Is tRPC still used? I started this project using t3 stack because i follow theo channel but this is my first next project.
joulev
trpc is still a solid choice yeah, especially if you primarily use client side data fetching

but type-safety – the part that trpc shines brightly – can also be quite easily achieved nowadays with server components (for querying) and server actions (for mutations)