NextJS Examples | Layout

StackChief LLC
October 12, 2019
0

Key Takeaways

Layouts in Next.js enable code reuse across multiple pages.
Components like Nav can be shared using custom layouts.
Various techniques, such as higher-order components and props, offer flexibility in creating layouts.

Using layouts, you can easily create reusable templates for different pages. This lets you establish a consistent design and structure across your application.

To start, create a new file named MyLayout.jsx in the components/ folder:

import Nav from './Nav';

const MyLayout = ({ children }) => (
  <div>
    <Nav />
    <div>
      {children}
    </div>
  </div>
);

export default MyLayout;

In your pages/ directory, reference MyLayout like this:

import React from 'react';
import Head from 'next/head';
import MyLayout from '../components/MyLayout';

const Home = () => (
  <MyLayout>
    <Head>
      <title>Home</title>
    </Head>
    Hello
  </MyLayout>
);

export default Home;

Notice how <Nav/> is included in the MyLayout component. By wrapping the Home component inside <MyLayout> tags, we avoid repeating the <Nav/> component across different pages, allowing a unified approach with a single MyLayout.

The reference to {children} in MyLayout represents all content nested within <MyLayout> tags.

Alternative Layout Techniques

Another way to create layouts is using a higher-order component:

import Nav from './Nav';

const withLayout = (Page) => {
  return () => (
    <div>
      <Nav />
      <Page />
    </div>
  );
};

export default withLayout;

Then, in your pages/ file:

import withLayout from '../components/MyLayout';

const PageContent = () => <p>Content for my layout!</p>;

export default withLayout(PageContent);

This approach treats the page content as input to a function, providing flexibility if you need to dynamically generate layouts or pass additional props.

Yet another method involves passing contents as props:

import Nav from './Nav';

const MyLayout = ({ content }) => (
  <div>
    <Nav />
    {content}
  </div>
);

export default MyLayout;

In your pages/ file:

import MyLayout from '../components/MyLayout';

const pageContent = <p>Hello Next.js</p>;

export default function Index() {
  return <MyLayout content={pageContent} />;
}

This method matches the previous example, but focuses on passing content as a prop rather than as a function parameter, which can make component logic clearer.

FAQ

Why use layouts in Next.js?

Layouts promote DRY (Don't Repeat Yourself) principles by sharing common structures, like navigation bars, across multiple pages, reducing redundancy and maintenance overhead.

Can I combine layout techniques?

Yes, you can mix and match techniques based on specific needs. For instance, use higher-order components for conditional layouts and standard layout components for static content.

What if my layout needs to use React Context?

You can wrap your layout component with a context provider and pass the necessary values, integrating context into layout logic seamlessly.

What everyone is doing wrong in tech interviews