📄 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: /

Creating a Layout

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

🔗 Nested Routes

Folder = URL segment

plaintext

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

Dynamic Routes

Use [slug] for dynamic pages

plaintext

app/blog/[slug]/page.tsx

✔ Example:

plaintext

/blog/my-post

🧩 Nested Layouts

👉 Layouts can be nested inside folders

plaintext

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

✔ Flow:

plaintext

Root Layout → Blog Layout → Page

📦 Dynamic Data (params)

👉 Access dynamic values:

plaintext

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

🔍 Search Params

👉 Used for query data (?filter=value)

plaintext

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

✔ Used for:

Filtering
Pagination

🔗 Navigation (Link)

👉 Use <Link> for routing

plaintext

import Link from 'next/link';

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

✔ Fast navigation (no page reload)

🧠 When to Use

page.tsx → create route
layout.tsx → shared UI
[slug] → dynamic routes
searchParams → query data

Layouts & Pages Tutorials

Web Development

📄 Layouts & Pages

Creating a Page

Creating a Layout

🔗 Nested Routes

Dynamic Routes

🧩 Nested Layouts

📦 Dynamic Data (params)

🔍 Search Params

🔗 Navigation (Link)

🧠 When to Use