This example shows a very common use case when building websites where you need to repeat some sort of layout for all your pages. Our pages are: home, about and contact and they all share the same layout and sidebar.

Deploy the example using Vercel or preview live with StackBlitz

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example layout-component layout-component-app

yarn create next-app --example layout-component layout-component-app

pnpm create next-app --example layout-component layout-component-app

Deploy it to the cloud with Vercel (Documentation).