📄 Layouts & Pages

Next.js uses file-based routing to create pages and layouts

Creating a Page

A page is UI for a specific route

plaintext

app/page.tsx

plaintext

export default function Page() {
  return <h1>Hello Next.js!</h1>;
}

✔ This creates route: /

A layout is shared UI across pages

plaintext

app/layout.tsx

plaintext

export default function Layout({ children }) {
  return (
    <html>
      <body>
        <main>{children}</main>
      </body>
    </html>
  );
}

✔ Must include <html> and <body>
✔ Wraps all pages

Folder = URL segment

plaintext

app/
 ├── page.tsx        → /
 └── blog/
      └── page.tsx  → /blog

Use [slug] for dynamic pages

plaintext

app/blog/[slug]/page.tsx

✔ Example:

plaintext

/blog/my-post

👉 Layouts can be nested inside folders

plaintext

app/
 ├── layout.tsx
 └── blog/
      ├── layout.tsx
      └── page.tsx

✔ Flow:

plaintext

Root Layout → Blog Layout → Page

👉 Access dynamic values:

plaintext

export default async function Page({ params }) {
  const { slug } = await params;
  return <h1>{slug}</h1>;
}

👉 Used for query data (?filter=value)

plaintext

export default async function Page({ searchParams }) {
  const filter = (await searchParams).filter;
}

✔ Used for:

👉 Use <Link> for routing

plaintext

import Link from 'next/link';

<Link href="/blog/post-1">Go to Post</Link>

✔ Fast navigation (no page reload)