Layouts and Pages in Next.js – Dynamic Routes, Nested Layouts, and Linking Between Pages

| Next.js page |

| root layout |

| dynamic route |

| searchParams |

Creating a Page in Next.js

To create a page, add a page.tsx file inside the app directory and export a React component:

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

Creating a Root Layout

Layouts are shared UI wrappers that persist across navigation. The root layout must include <html> and <body> tags:

// app/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <main>{children}</main>
      </body>
    </html>
  );
}

Creating Nested Routes

To create a route like /blog, add a blog folder inside app and include a page.tsx file:

// app/blog/page.tsx
export default async function Page() {
  const posts = await getPosts();
  return (
    <ul>
      {posts.map((post) => (
        <Post key={post.id} post={post} />
      ))}
    </ul>
  );
}

Creating Dynamic Routes

To create a dynamic route like /blog/[slug], wrap the folder name in square brackets:

// app/blog/[slug]/page.tsx
export default async function BlogPostPage({ params }) {
  const { slug } = await params;
  const post = await getPost(slug);
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

Nesting Layouts

Layouts can be nested by adding a layout.tsx file inside route segments. For example, for /blog:

// app/blog/layout.tsx
export default function BlogLayout({ children }) {
  return <section>{children}</section>;
}

The root layout wraps the blog layout, which wraps the blog page and blog post page.

Accessing Search Parameters

In server components, use the searchParams prop to access query parameters:

// app/page.tsx
export default async function Page({ searchParams }) {
  const filters = (await searchParams).filters;
}

In client components, use the useSearchParams hook.

Linking Between Pages

Use the built-in <Link> component from next/link to navigate between routes:

// app/ui/post.tsx
import Link from 'next/link';

export default async function Post({ post }) {
  const posts = await getPosts();
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>
          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  );
}

Using PageProps and LayoutProps

Next.js generates global helper types for route props:

// app/blog/[slug]/page.tsx
export default async function Page(props: PageProps<'/blog/[slug]'>) {
  const { slug } = await props.params;
  return <h1>Blog post: {slug}</h1>;
}

// app/dashboard/layout.tsx
export default function Layout(props: LayoutProps<'/dashboard'>) {
  return (
    <section>
      {props.children}
      {/* If you have app/dashboard/@analytics */}
      {/* {props.analytics} */}
    </section>
  );
}

Conclusion

With page.tsx and layout.tsx files, you can build dynamic, nested, and linkable routes in Next.js. These conventions make your application more flexible, readable, and maintainable.