Repository files navigation

This project was bootstrapped withCreate Next App.

Find the most recent version of this guide athere. And check outNext.js repo for the most up-to-date info.

• Questions? Feedback?
• Folder Structure
• Available Scripts
  • npm run dev
  • npm run build
  • npm run start
• Using CSS
• Adding Components
• Fetching Data
• Custom Server
• Syntax Highlighting
• Using thestatic Folder
• Deploy to Now
• Something Missing?

Check outNext.js FAQ & docs orlet us know your feedback.

After creating an app, it should look something like:

.├── README.md├── components│   ├── head.js│   └── nav.js├── next.config.js├── node_modules│   ├── [...]├── package.json├── pages│   └── index.js├── static│   └── favicon.ico└── yarn.lock

Routing in Next.js is based on the file system, so./pages/index.js maps to the/ route and./pages/about.js would map to/about.

The./static directory maps to/static in thenext server, so you can put all yourother static resources like images or compiled CSS in there.

Out of the box, we get:

• Automatic transpilation and bundling (with webpack and babel)
• Hot code reloading
• Server rendering and indexing of./pages
• Static file serving../static/ is mapped to/static/

Read more aboutNext's Routing

In the project directory, you can run:

Runs the app in the development mode.
Openhttp://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any errors in the console.

Builds the app for production to the.next folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

Starts the application in production mode.The application should be compiled with `next build` first.

See the section in Next docs aboutdeployment for more information.

styled-jsx is bundled with next to provide support for isolated scoped CSS. The aim is to support "shadow CSS" resembling of Web Components, which unfortunatelydo not support server-rendering and are JS-only.

exportdefault()=>(<div>    Hello world<p>scoped!</p><stylejsx>{`      p {        color: blue;      }      div {        background: red;      }      @media (max-width: 600px) {        div {          background: blue;        }      }    `}</style></div>)

Read more aboutNext's CSS features.

We recommend keeping React components in./components and they should look like:

constSimple=()=><div>Simple Component</div>exportdefaultSimple// don't forget to export default!

import{Component}from"react"classComplexextendsComponent{state={text:"World",}render(){const{ text}=this.statereturn<div>Hello{text}</div>}}exportdefaultComplex// don't forget to export default!

You can fetch data inpages components usinggetInitialProps like this:

constPage=(props)=><div>Next stars:{props.stars}</div>Page.getInitialProps=async({ req})=>{constres=awaitfetch("https://api.github.com/repos/zeit/next.js")constjson=awaitres.json()conststars=json.stargazers_countreturn{ stars}}exportdefaultPage

For the initial page load,getInitialProps will execute on the server only.getInitialProps will only be executed on the client when navigating to a different route via theLink component or using the routing APIs.

Note:getInitialProps cannot be used in children components. Only inpages.

Read more aboutfetching data and the component lifecycle

Want to start a new app with a custom server? Runcreate-next-app --example customer-server custom-app

Typically you start your next server withnext start. It's possible, however, to start a server 100% programmatically in order to customize routes, use route patterns, etc

This example makes/a resolve to./pages/b, and/b resolve to./pages/a:

const{ createServer}=require("http")const{ parse}=require("url")constnext=require("next")constdev=process.env.NODE_ENV!=="production"constapp=next({ dev})consthandle=app.getRequestHandler()app.prepare().then(()=>{createServer((req,res)=>{// Be sure to pass `true` as the second argument to `url.parse`.// This tells it to parse the query portion of the URL.constparsedUrl=parse(req.url,true)const{ pathname, query}=parsedUrlif(pathname==="/a"){app.render(req,res,"/b",query)}elseif(pathname==="/b"){app.render(req,res,"/a",query)}else{handle(req,res,parsedUrl)}}).listen(3000,(err)=>{if(err)throwerrconsole.log("> Ready on http://localhost:3000")})})

Then, change yourstart script toNODE_ENV=production node server.js.

Read more aboutcustom server and routing

To configure the syntax highlighting in your favorite text editor, head to therelevant Babel documentation page and follow the instructions. Some of the most popular editors are covered.

now offers a zero-configuration single-command deployment.

1. Install thenow command-line tool either via the recommendeddesktop tool or via node withnpm install -g now.

2. Runnow from your project directory. You will see anow.sh URL in your output like this:

   > Ready! https://your-project-dirname-tpspyhtdtk.now.sh (copied to clipboard)

   Paste that URL into your browser when the build is complete, and you will see your deployed app.

You can find more details aboutnow here.

If you have ideas for how we could improve this readme or the project in general,let us know orcontribute some!