Files

.circleci
.github
bench
errors
examples
- active-class-name
- analyze-bundles
- basic-css
- basic-export
- custom-charset
- custom-server-actionhero
- custom-server-express
- custom-server-fastify
- custom-server-hapi
- custom-server-koa
- custom-server-micro
- custom-server-nodemon
- custom-server-polka
- custom-server-typescript
- custom-server
- data-fetch
- form-handler
- gh-pages
- head-elements
- hello-world
- layout-component
- nested-components
- only-client-render-external-dependencies
- page-transitions
- parameterized-routing
- pass-server-data
- progressive-render
- root-static-files
- shared-modules
- ssr-caching
- svg-components
- using-inferno
- using-nerv
- using-preact
- using-router
- using-with-router
- with-absolute-imports
- with-algolia-react-instantsearch
- with-amp
- with-ant-design-less
- with-ant-design
- with-antd-mobile
- with-aphrodite
- with-apollo-and-redux-saga
- with-apollo-and-redux
- with-apollo-auth
- with-apollo
- with-app-layout
  - pages
  - package.json
  - readme.md
- with-asset-imports
- with-babel-macros
- with-carbon-components
- with-cerebral
- with-componentdidcatch
- with-configured-preset-env
- with-context-api
- with-custom-babel-config
- with-custom-reverse-proxy
- with-cxs
- with-data-prefetch
- with-docker
- with-dotenv
- with-draft-js
- with-dynamic-import
- with-electron
- with-emotion-fiber
- with-emotion
- with-external-scoped-css
- with-fela
- with-firebase-authentication
- with-firebase-hosting-and-typescript
- with-firebase-hosting
- with-flow
- with-freactal
- with-glamor
- with-glamorous
- with-global-stylesheet-simple
- with-global-stylesheet
- with-google-analytics
- with-hashed-statics
- with-higher-order-component
- with-i18next
- with-immutable-redux-wrapper
- with-ioc
- with-jest-typescript
- with-jest
- with-kea
- with-loading
- with-markdown
- with-material-ui
- with-mobx-state-tree-typescript
- with-mobx-state-tree
- with-mobx
- with-mocha
- with-next-css
- with-next-less
- with-next-page-transitions
- with-next-routes
- with-next-sass
- with-noscript
- with-now-env
- with-pkg
- with-polyfills
- with-portals
- with-prefetching
- with-pretty-url-routing
- with-react-ga
- with-react-helmet
- with-react-i18next
- with-react-intl
- with-react-jss
- with-react-md
- with-react-native-web
- with-react-toolbox
- with-react-uwp
- with-react-with-styles
- with-reasonml
- with-rebass
- with-recompose
- with-redux-code-splitting
- with-redux-observable
- with-redux-reselect-recompose
- with-redux-saga
- with-redux-wrapper
- with-redux
- with-reflux
- with-refnux
- with-relay-modern
- with-rematch
- with-scoped-stylesheets-and-postcss
- with-segment-analytics
- with-semantic-ui
- with-sentry
- with-shallow-routing
- with-sitemap-and-robots-express-server-typescript
- with-sitemap-and-robots-express-server
- with-slate
- with-socket.io
- with-static-export
- with-storybook
- with-strict-csp-hash
- with-strict-csp
- with-styled-components
- with-styled-jsx-plugins
- with-styled-jsx-postcss
- with-styled-jsx-scss
- with-styletron
- with-sw-precache
- with-tailwindcss
- with-ts-node
- with-typescript
- with-typestyle
- with-universal-configuration-runtime
- with-universal-configuration
- with-unstated
- with-url-object-routing
- with-videojs
- with-webassembly
- with-webpack-bundle-analyzer
- with-webpack-bundle-size-analyzer
- with-yarn-workspaces
- with-zones
- .babelrc
- .gitignore
packages
test
.gitignore
.npmrc
.travis.yml
appveyor.yml
azure-pipelines.yml
lerna.json
package.json
readme.md
taskfile.js

with-app-layout

Michael Herold

and

timneutkens

vercel#4751 - Explicitly mention install when cloning examples (verce…

Jul 11, 2018

5b3578e · Jul 11, 2018

History

This branch is 27150 commits behind vercel/next.js:canary.

Name	Name	Last commit message	Last commit date
parent directory ..
pages	pages	Add _app layout example	Apr 24, 2018
package.json	package.json	Add _app layout example	Apr 24, 2018
readme.md	readme.md	vercel#4751 - Explicitly mention install when cloning examples (verce…	Jul 11, 2018

readme.md

With `App` layout example

How to use

Using `create-next-app`

Execute create-next-app with Yarn or npx to bootstrap the example:

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:

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:

npm install
npm run dev
# or
yarn
yarn dev

Deploy it to the cloud with now (download)

now

The idea behind the example

Shows how to use _app.js to implement a global layout for all pages.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Files

with-app-layout

with-app-layout

readme.md

With `App` layout example

How to use

Using `create-next-app`

Download manually

The idea behind the example

Collapse file tree

Files

with-app-layout

Directory actions

More options

Directory actions

More options

Latest commit

History

with-app-layout

Folders and files

parent directory

readme.md

With App layout example

How to use

Using create-next-app

Download manually

The idea behind the example

With `App` layout example

Using `create-next-app`