terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

Added layout component example (#560)

Browse source 
* 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
This commit is contained in:
Alex Moldovan 2017-01-05 23:03:36 +02:00 committed by Guillermo Rauch
parent e363e73715
commit 07f717061f
8 changed files with 94 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
README.md
View file

@ -122,7 +122,10 @@ export default () => (
<p><details>
<summary><b>Examples</b></summary>
<ul><li><a href="./examples/head-elements">Head elements</a></li></ul>
<ul>
<li><a href="./examples/head-elements">Head elements</a></li>
<li><a href="./examples/layout-component">Layout component</a></li>
</ul>
</details></p>
We expose a built-in component for appending elements to the `<head>` of the page.

2
examples/.babelrc Normal file
View file

@ -0,0 +1,2 @@
{
}

28
examples/layout-component/README.md Normal file
View file

@ -0,0 +1,28 @@
# Layout component example
## How to use
Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:
```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.

25
examples/layout-component/components/layout.js Normal file
View file

@ -0,0 +1,25 @@
import Link from 'next/link'
import Head from 'next/head'
export default ({ children, title = 'This is the default title' }) => (
<div>
<Head>
<title>{ title }</title>
<meta charSet='utf-8' />
<meta name='viewport' content='initial-scale=1.0, width=device-width' />
</Head>
<header>
<nav>
<Link href='/'>Home</Link> |
<Link href='/about'>About</Link> |
<Link href='/contact'>Contact</Link>
</nav>
</header>
{ children }
<footer>
I`m here to stay
</footer>
</div>
)

14
examples/layout-component/package.json Normal file
View file

@ -0,0 +1,14 @@
{
"name": "hello-world",
"version": "1.0.0",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "*"
},
"author": "",
"license": "ISC"
}

7
examples/layout-component/pages/about.js Normal file
View file

@ -0,0 +1,7 @@
import Layout from '../components/layout'
export default () => (
<Layout title='About us'>
<div>About us</div>
</Layout>
)

7
examples/layout-component/pages/contact.js Normal file
View file

@ -0,0 +1,7 @@
import Layout from '../components/layout'
export default () => (
<Layout title='Contact us'>
<div>Contact</div>
</Layout>
)

7
examples/layout-component/pages/index.js Normal file
View file

@ -0,0 +1,7 @@
import Layout from '../components/layout'
export default () => (
<Layout>
<div>Hello World.</div>
</Layout>
)