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
vercel · Jan 5, 2017 · 07f7170 · 07f7170
1 parent e363e73
commit 07f7170
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -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.

diff --git a/examples/.babelrc b/examples/.babelrc
@@ -0,0 +1,2 @@
+{
+}
diff --git a/examples/layout-component/README.md b/examples/layout-component/README.md
@@ -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.
diff --git a/examples/layout-component/components/layout.js b/examples/layout-component/components/layout.js
@@ -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>
+)
diff --git a/examples/layout-component/package.json b/examples/layout-component/package.json
@@ -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"
+}
diff --git a/examples/layout-component/pages/about.js b/examples/layout-component/pages/about.js
@@ -0,0 +1,7 @@
+import Layout from '../components/layout'
+
+export default () => (
+  <Layout title='About us'>
+    <div>About us</div>
+  </Layout>
+)
diff --git a/examples/layout-component/pages/contact.js b/examples/layout-component/pages/contact.js
@@ -0,0 +1,7 @@
+import Layout from '../components/layout'
+
+export default () => (
+  <Layout title='Contact us'>
+    <div>Contact</div>
+  </Layout>
+)
diff --git a/examples/layout-component/pages/index.js b/examples/layout-component/pages/index.js
@@ -0,0 +1,7 @@
+import Layout from '../components/layout'
+
+export default () => (
+  <Layout>
+    <div>Hello World.</div>
+  </Layout>
+)