Skip to content

Commit

Permalink
Add _app layout example
Browse files Browse the repository at this point in the history
  • Loading branch information
timneutkens committed Apr 24, 2018
1 parent e6b5567 commit 0daf9be
Show file tree
Hide file tree
Showing 5 changed files with 85 additions and 1 deletion.
15 changes: 15 additions & 0 deletions examples/with-app-layout/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"name": "with-app-layout",
"version": "1.0.0",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "6.0.0-canary.6",
"react": "^16.0.0",
"react-dom": "^16.0.0"
},
"license": "ISC"
}
22 changes: 22 additions & 0 deletions examples/with-app-layout/pages/_app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from 'react'
import App, {Container} from 'next/app'

class Layout extends React.Component {
render () {
const {children} = this.props
return <div className='layout'>
{children}
</div>
}
}

export default class MyApp extends App {
render () {
const {Component, pageProps} = this.props
return <Container>
<Layout>
<Component {...pageProps} />
</Layout>
</Container>
}
}
3 changes: 3 additions & 0 deletions examples/with-app-layout/pages/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default () => {
return <div>test</div>
}
44 changes: 44 additions & 0 deletions examples/with-app-layout/readme.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-app-layout)

# With `App` layout example

## How to use

### Using `create-next-app`

Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:

```bash
npx create-next-app --example with-app-layout with-app-layout-app
# or
yarn create next-app --example with-app-layout with-app-layout-app
```

### Download manually

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

```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-app-layout
cd with-app-layout
```

Install it and run:

```bash
npm install
npm run dev
# or
yarn
yarn dev
```

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

```bash
now
```

## The idea behind the example

Shows how to use _app.js to implement a global layout for all pages.
2 changes: 1 addition & 1 deletion readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -953,7 +953,7 @@ export default () => <HelloBundle title="Dynamic Bundle" />

<p><details>
<summary><b>Examples</b></summary>
<ul><li><a href="./examples/layout-component">Using `_app.js` for layout</a></li></ul>
<ul><li><a href="./examples/with-app-layout">Using `_app.js` for layout</a></li></ul>
<ul><li><a href="./examples/with-componentdidcatch">Using `_app.js` to override `componentDidCatch`</a></li></ul>
</details></p>

Expand Down

0 comments on commit 0daf9be

Please sign in to comment.