Tutorials


Next JS Layout and Templates


In Next.js, layouts and templates are used to manage consistent parts of your application and provide a better way to organize content across multiple pages. This helps in structuring the application, maintaining consistent UI, and improving the developer experience. Here's a detailed look at layouts and templates in Next.js:

1. Layouts in Next.js

Layouts are components that wrap pages and provide a consistent structure, like headers, footers, sidebars, and other elements that are shared across multiple pages. There are different ways to implement layouts in Next.js.

a. Using Layout Components (for Next.js 12 and earlier)

  • In Next.js 12 and earlier versions, you can create a reusable layout component and use it in your pages.
  • Example:
    • Create a Layout component:
      // components/Layout.js
const Layout = ({ children }) => {
    return (
        <div>
            <header>Header</header>
            <main>{children}</main>
            <footer>Footer</footer>
        </div>
    );
};

export default Layout;
    • Use the layout in a page:
      // pages/about.js
import Layout from '../components/Layout';

const About = () => {
    return (
        <Layout>
            <h1>About Us</h1>
            <p>This is the about page.</p>
        </Layout>
    );
};

export default About;
  • This way, you can ensure that all pages using this layout have a consistent header and footer.

b. Per-Page Layouts (Component-Level Layout)

  • You can also set a custom layout on a per-page basis using a layout function.
  • Example:
    // pages/_app.js
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
    const getLayout = Component.getLayout || ((page) => page);
    return getLayout(<Component {...pageProps} />);
}

export default MyApp;

// pages/about.js
const About = () => {
    return <div>About Us</div>;
};

About.getLayout = function getLayout(page) {
    return (
        <Layout>
            {page}
        </Layout>
    );
};

export default About;
  • This allows you to use different layouts for different pages as needed.

2. Layouts in App Router (Next.js 13 and later)

Next.js 13 introduced the App Router with a new way to create layouts using the app directory. Here’s how it works:

a. Creating Layouts

  • Layouts are created in the app directory by using a layout.js file.
  • Layouts wrap the contents of a specific route segment and apply to all nested children.
  • Example:
    app/
  ├── layout.js       // Root layout (applies to the entire app)
  ├── page.js         // Main page (root route)
  ├── about/
      ├── layout.js   // About-specific layout
      └── page.js     // About page
  └── blog/
      ├── [id]/
          └── page.js // Blog post page
  • Root layout example:
    // app/layout.js
export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <header>Header</header>
                {children}
                <footer>Footer</footer>
            </body>
        </html>
    );
}
  • Page-specific layout example:
    // app/about/layout.js
export default function AboutLayout({ children }) {
    return (
        <div>
            <nav>About Navigation</nav>
            {children}
        </div>
    );
}

b. Nested Layouts

  • You can nest layouts by having multiple layout.js files in different directories.
  • The nested layout will wrap the children in a specific segment of the app.
  • For instance, if there is a layout.js file inside app/blog/, it will wrap all the pages inside app/blog/.

3. Templates in Next.js 13 (App Router)

Templates are similar to layouts but are used to create a unique instance for each page. Templates provide more flexibility when dealing with SSR (Server-Side Rendering) since they prevent content from being shared between different pages.

a. Using Templates

  • You can create a template.js file in the same way as layout.js.
  • Templates work similarly to layouts but create a new instance every time.
  • Example:
    app/
  ├── blog/
      ├── template.js  // Template that creates a new instance for each blog post
      └── [id]/
          └── page.js
  • This is helpful if each page needs to have its own isolated state or server-rendered content, such as analytics, user-specific data, or page-specific caching.

4. Shared Components in Layouts

  • Layouts often include shared components like headers, footers, and sidebars.
  • You can use custom components within the layout.js file to keep these elements modular.
  • Example:
    // components/Header.js
const Header = () => {
    return <header>Site Header</header>;
};

export default Header;

// app/layout.js
import Header from '../components/Header';

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <Header />
                {children}
            </body>
        </html>
    );
}

Summary

  • Layouts are reusable components that wrap pages, providing a consistent structure (headers, footers, sidebars).
    • In Next.js 12 and earlier, layouts are implemented by wrapping pages with custom components.
    • In Next.js 13 (App Router), layouts are defined using layout.js in the app directory and can be nested for different sections.
  • Templates in Next.js 13 work similarly to layouts but create a new instance for each page, useful for unique, non-shared content.
  • Shared Components (like headers and footers) are included in layouts to provide modularity and reusability.

Layouts and templates help in maintaining consistent structure across your Next.js application, making it easier to manage shared components and create unique instances when needed.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about