# next.js `Next.js` is a minimalistic framework for server-rendered React applications. ## How to use The file-system is the main API. Every `.js` file becomes a route that gets automatically processed and rendered. Populate `./pages/index.js` inside your project: ```jsx import React from 'react' export default () => (
Welcome to next.js!
) ``` and then just run `next` and go to `http://localhost:3000` So far, 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/` ### Bundling (code splitting) Every `import` you declare gets bundled and served with each page ```jsx import React from 'react' import cowsay from 'cowsay' export default () => (
{ cowsay('hi there!') }
) ``` That means pages never load unneccessary code! ### CSS We use [Aphrodite](https://github.com/Khan/aphrodite) to provide a great built-in solution for CSS modularization ```jsx import React from 'react' import { css, StyleSheet } from 'next/css' export default () => {
Hello world
}) const styles = StyleSheet.create({ main: { background: 'red', '@media (max-width: 600px)': { background: 'blue' } } }) ``` ### `` side effects We expose a built-in component for appending elements to the `` of the page. ```jsx import React from 'react' import Head from 'next/head' export default () => ( My page title

Hello world!

) ``` ### Stateful components When state, lifecycle hooks or initial data population you can export a `React.Component`: ```jsx import React from 'react' export default class extends React.Component { static async getInitialProps ({ req }) { return req ? { userAgent: req.headers.userAgent } : { userAgent: navigator.userAgent } } render () { return
Hello World {this.props.userAgent}
} } ``` ### Routing Client-side transitions between routes are enabled via a `` component #### pages/index.js ```jsx import React from 'react' import Link from 'next/link' export default () => (
Click here to read more
) ``` #### pages/about.js ```jsx import React from 'react' export default () => (

Welcome to About!

) ``` Client-side routing behaves exactly like the native UA: 1. The component is fetched 2. If it defines `getInitialProps`, data is fetched. If an error occurs, `_error.js` is rendered 3. After 1 and 2 complete, `pushState` is performed and the new component rendered Each top-level component receives a `url` property with the following API: - `path` - `String` of the current path excluding the query string - `query` - `Object` with the parsed query string. Defaults to `{}` - `push(url)` - performs a `pushState` call associated with the current component - `replace(url)` - performs a `replaceState` call associated with the current component - `pushTo(url)` - performs a `pushState` call that renders the new `url`. This is equivalent to following a `` - `replaceTo(url)` - performs a `replaceState` call that renders the new `url` ### Error handling 404 or 500 errors are handled both client and server side by a default component `error.js`. If you wish to override it, define a `_error.js`: ```jsx import React from 'react' export default ({ statusCode }) => (

An error { statusCode } occurred

) ``` ### Production deployment To deploy, run: ```bash next build next start ``` For example, to deploy with `now` a `package.json` like follows is recommended: ```json { "name": "my-app", "dependencies": { "next": "latest" }, "scripts": { "dev": "next", "build": "next build", "start": "next start" } } ```