Creating a Layout Component in Next.js

February 27, 2022

Create a directory and files for the layout component

$ mkdir components
$ touch components/Layout.ts

// components/Layout.tsx
import React from "react";
import Head from "next/head";

type Props = {
  title?: string;
  children: React.ReactNode;
};

const Layout = ({ children, title = "Next.js App" }: Props) => {
  return (
    <>
      <Head>
        <title>{title}</title>
      </Head>
      <main>{children}</main>;
    </>
  );
};

export default Layout;

How to use the Layout component

// pages/index.tsx
import Layout from "../components/Layout";

const Home = () => {
  return <Layout title="Home">Home</Layout>;
};

export default Home;

References

Tweet