History

Sam Robbins e0ca6de832 Update layout-component example to use named functions (#27331 ) ## Documentation / Examples - [x] Make sure the linting passes In line with the PR #27297 which solved issue #27252, this updates the example to also use named functions in order to pass ESLint		2021-07-20 14:02:51 +00:00
..
components	Update layouts example to persist state across client-side transitions. (#26706 )	2021-06-28 22:19:15 -05:00
pages	Update layout-component example to use named functions (#27331 )	2021-07-20 14:02:51 +00:00
.gitignore	Added .gitignore to examples that are deployed to vercel (#15127 )	2020-07-16 10:52:23 -04:00
global.css	Update layouts example to persist state across client-side transitions. (#26706 )	2021-06-28 22:19:15 -05:00
package.json	Clean up examples `package.json` (#27121 )	2021-07-12 19:58:03 +00:00
README.md	Update layouts example to persist state across client-side transitions. (#26706 )	2021-06-28 22:19:15 -05:00

README.md

Layout component example

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.

Preview

Preview the example live on StackBlitz:

Deploy your own

Deploy the example using Vercel:

How to use

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

npx create-next-app --example layout-component layout-component-app
# or
yarn create next-app --example layout-component layout-component-app

Deploy it to the cloud with Vercel (Documentation).