next.js/examples/layout-component/README.md


# Layout component example

## How to use

Download the example [or clone the repo](https://github.com/zeit/next.js):

```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/hello-world
cd hello-world
```

Install it and run:

```bash
npm install
npm run dev
```

Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))

```bash
now
```

## The idea behind the 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 `<head>` settings, the `<nav>` and the `<footer>`. Further more, the title (and potentially other head elements) can be sent as a prop to the layout component so that it's customizable in all pages.
Added layout component example (#560) * added layout component example * coding style fixes * trailing spaces removed * updated README file * added layout example in docs * moved .babelrc so that it handles all projects from the examples folder 2017-01-05 21:03:36 +00:00
			`# Layout component example`

			`## How to use`

Fix link (#789) * Fix link * Fix links 2017-01-16 21:23:24 +00:00			`Download the example [or clone the repo](https://github.com/zeit/next.js):`
Added layout component example (#560) * added layout component example * coding style fixes * trailing spaces removed * updated README file * added layout example in docs * moved .babelrc so that it handles all projects from the examples folder 2017-01-05 21:03:36 +00:00
			```bash
			`curl https://codeload.github.com/zeit/next.js/tar.gz/master \| tar -xz --strip=2 next.js-master/examples/hello-world`
			`cd hello-world`
			```

			`Install it and run:`

			```bash
			`npm install`
			`npm run dev`
			```

			`Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))`

			```bash
			`now`
			```

			`## The idea behind the 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 `<head>` settings, the `<nav>` and the `<footer>`. Further more, the title (and potentially other head elements) can be sent as a prop to the layout component so that it's customizable in all pages.