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

Add _app layout example

This commit is contained in:
Tim Neutkens 2018-04-24 12:30:24 -07:00
parent e6b5567b20
commit 0daf9beedc
5 changed files with 85 additions and 1 deletions

View file

@ -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"
}

View file

@ -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>
}
}

View file

@ -0,0 +1,3 @@
export default () => {
return <div>test</div>
}

View file

@ -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.

View file

@ -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>