Create reusable templates for page routes in Next.js

1월 03, 2025

Ah, got it! If you're looking to create reusable templates for page routes in Next.js (essentially for different types of pages or dynamic routes), you can use dynamic routing combined with layout components to create a flexible templating system. Here’s how you can structure it:

1. Dynamic Routes in Next.js

In Next.js, you can create dynamic routes by using file-based routing. You can define dynamic route segments using square brackets ([ ]). For example, to create a dynamic route for a blog post:

Example Directory Structure:

/pages
  /posts
    [id].js

The [id].js file will capture any id passed in the URL as a route parameter. For example, /posts/1 will render the id as 1, and /posts/2 will render id as 2.

Here’s how you might use dynamic routing to create a page template for different routes:

// /pages/posts/[id].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Post: {id}</h1>
      <p>Content for post {id}</p>
    </div>
  );
}

2. Using Layouts for Page Templates

If you want to create reusable page templates that wrap the content of different routes, you can build layout components. For example, you can have different templates for different types of pages like Home, About, Blog, etc., and each page can follow a specific layout.

Here’s how you can set up layout templates for routes:

Example Layout Component

You can create a generic layout that wraps different pages:

// /components/Layout.js
const Layout = ({ children }) => (
  <div>
    <header>Header Content</header>
    <nav>Navigation</nav>
    <main>{children}</main>
    <footer>Footer Content</footer>
  </div>
);

export default Layout;

Using Layout in Pages

In Next.js, you can use the layout at the page level. For example, if you want all pages under /posts/ to use the same layout template, you can do something like this:

// /pages/posts/[id].js
import Layout from '../../components/Layout';
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <Layout>
      <h1>Post: {id}</h1>
      <p>Content for post {id}</p>
    </Layout>
  );
}

This way, you’re applying the Layout template to the Post page.

3. Using Custom App for Global Layout

To apply a global template across all pages in your application, you can use _app.js, which wraps every page in the Next.js application. If you want to add a common layout for all pages (like a header, footer, etc.), you can do it here.

// /pages/_app.js
import Layout from '../components/Layout';

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

export default MyApp;

This way, all pages in the app will use the Layout component. If you need different layouts for different types of pages, you can customize this logic.

4. Dynamic Templates for Different Routes

You might want specific routes (like /posts/[id], /about, /contact) to have their own templates or layouts. For this, you can conditionally use different layouts by creating a custom layout selector.

Example Layout Selector:

// /components/CustomLayout.js
import PostLayout from './PostLayout';
import DefaultLayout from './DefaultLayout';

const CustomLayout = ({ children, route }) => {
  if (route.includes('posts')) {
    return <PostLayout>{children}</PostLayout>;
  }

  return <DefaultLayout>{children}</DefaultLayout>;
};

export default CustomLayout;

Applying Custom Layout in `_app.js`:

// /pages/_app.js
import CustomLayout from '../components/CustomLayout';
import { useRouter } from 'next/router';

function MyApp({ Component, pageProps }) {
  const { pathname } = useRouter();

  return (
    <CustomLayout route={pathname}>
      <Component {...pageProps} />
    </CustomLayout>
  );
}

export default MyApp;

5. Nested Dynamic Routes

You can also have nested dynamic routes and each route can follow its own template or layout.

Example of Nested Dynamic Routes:

/pages
  /posts
    [id]
      index.js
      [slug].js

/posts/[id] could show a general blog post, and /posts/[id]/[slug] could show a more specific detail page, both using different layouts or templates.

Example for Nested Route with Layout:

// /pages/posts/[id]/index.js
import { useRouter } from 'next/router';

const PostDetail = () => {
  const router = useRouter();
  const { id } = router.query;

  return <div>Showing details for post {id}</div>;
};

export default PostDetail;

// /pages/posts/[id]/[slug].js
import { useRouter } from 'next/router';

const PostSlug = () => {
  const router = useRouter();
  const { id, slug } = router.query;

  return <div>Post {id} with slug {slug}</div>;
};

export default PostSlug;

Conclusion:

Dynamic Routing: Use Next.js's file-based routing and dynamic routes ([id].js) for custom pages.
Layouts: Create reusable layout components and apply them to specific pages or globally.
Custom Layout Selector: Dynamically select layouts based on the route.
Nested Routes: Use nested dynamic routes for more complex templates and page structures.

This approach should give you flexibility to define custom templates for different page routes in Next.js! Let me know if you need more details or help with specific examples.

IT