Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added layout component example #560

Merged
merged 8 commits into from
Jan 5, 2017
Merged

Added layout component example #560

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2695b0a
added layout component example
alexnm Dec 29, 2016
df6ed02
coding style fixes
alexnm Dec 29, 2016
f7ace7d
trailing spaces removed
alexnm Dec 29, 2016
ebd1a17
updated README file
alexnm Dec 29, 2016
072d741
Merge remote-tracking branch 'upstream/master'
alexnm Dec 30, 2016
7f29d90
added layout example in docs
alexnm Dec 30, 2016
14e7454
Merge remote-tracking branch 'upstream/master'
alexnm Jan 2, 2017
3710df2
moved .babelrc so that it handles all projects from the examples folder
alexnm Jan 2, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 2 additions & 0 deletions examples/.babelrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
{
}
28 changes: 28 additions & 0 deletions examples/layout-component/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 25 additions & 0 deletions examples/layout-component/components/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 14 additions & 0 deletions examples/layout-component/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 7 additions & 0 deletions examples/layout-component/pages/about.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import Layout from '../components/layout'

export default () => (
<Layout title='About us'>
<div>About us</div>
</Layout>
)
7 changes: 7 additions & 0 deletions examples/layout-component/pages/contact.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import Layout from '../components/layout'

export default () => (
<Layout title='Contact us'>
<div>Contact</div>
</Layout>
)
7 changes: 7 additions & 0 deletions examples/layout-component/pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import Layout from '../components/layout'

export default () => (
<Layout>
<div>Hello World.</div>
</Layout>
)