+
+
+
We bundle [styled-jsx](https://github.com/zeit/styled-jsx) to provide support for isolated scoped CSS. The aim is to support "shadow CSS" similar to Web Components, which unfortunately [do not support server-rendering and are JS-only](https://github.com/w3c/webcomponents/issues/71).
@@ -180,12 +184,21 @@ Please see the [styled-jsx documentation](https://www.npmjs.com/package/styled-j
#### CSS-in-JS
-
+
+
+
It's possible to use any existing CSS-in-JS solution. The simplest one is inline styles:
@@ -216,13 +229,15 @@ _Note: Don't name the `static` directory anything else. The name is required and
### Populating ``
-
+
+
+
We expose a built-in component for appending elements to the `` of the page.
@@ -265,10 +280,14 @@ _Note: The contents of `` get cleared upon unmounting the component, so ma
### Fetching data and component lifecycle
-
+
+
+
When you need state, lifecycle hooks or **initial data population** you can export a `React.Component` (instead of a stateless function, like shown above):
@@ -337,12 +356,14 @@ export default Page
#### With ``
-
+
+
+
Client-side transitions between routes can be enabled via a `` component. Consider these two pages:
@@ -378,12 +399,14 @@ To inject the `pathname`, `query` or `asPath` in your component, you can use [wi
##### With URL object
-
+
+
+
The component `` can also receive an URL object and it will automatically format it to create the URL string.
@@ -471,13 +494,15 @@ The default behaviour of `` is to scroll to the top of the page. When ther
#### Imperatively
-
+
+
+
You can also do client-side page transitions using the `next/router`
@@ -592,12 +617,14 @@ Router.events.on('routeChangeError', (err, url) => {
##### Shallow Routing
-
+
+
+
Shallow routing allows you to change the URL without running `getInitialProps`. You'll receive the updated `pathname` and the `query` via the `url` prop of the same page that's loaded, without losing state.
@@ -634,12 +661,14 @@ componentDidUpdate(prevProps) {
#### Using a Higher Order Component
-
+
+
+
If you want to access the `router` object inside any component in your app, you can use the `withRouter` Higher-Order Component. Here's how to use it:
@@ -673,10 +702,14 @@ The above `router` object comes with an API similar to [`next/router`](#imperati
⚠️ This is a production only feature ⚠️
-
+
+
+
Typically you start your next server with `next start`. It's possible, however, to start a server 100% programmatically in order to customize routes, use route patterns, etc.
@@ -896,12 +931,14 @@ app.prepare().then(() => {
### Dynamic Import
-
+
+
+
Next.js uses the `App` component to initialize pages. You can override it and control the page initialization. Which allows you to do amazing things like:
@@ -1036,11 +1077,15 @@ export default class MyApp extends App {
### Custom ``
-
+
+
+
- Is rendered on the server side
- Is used to change the initial server side rendered document markup
@@ -1251,10 +1296,14 @@ module.exports = {
### Customizing webpack config
-
+
+
+
In order to extend our usage of `babel`, you can simply define a `.babelrc` file at the root of your app. This file is optional.
@@ -1471,10 +1524,14 @@ The [polyfills](https://github.com/zeit/next.js/tree/canary/examples/with-polyfi
## Static HTML export
-
+
+
+
`next export` is a way to run your Next.js app as a standalone static app without the need for a Node.js server.
The exported app supports almost every feature of Next.js, including dynamic urls, prefetching, preloading and dynamic imports.
@@ -1521,7 +1578,7 @@ module.exports = {
Then simply run these commands:
-```sh
+```bash
next build
next export
```
@@ -1539,7 +1596,7 @@ For that you may need to add a NPM script to `package.json` like this:
And run it at once with:
-```sh
+```bash
npm run export
```
@@ -1551,7 +1608,7 @@ Now you can deploy the `out` directory to any static hosting service. Note that
For an example, simply visit the `out` directory and run following command to deploy your app to [ZEIT Now](https://zeit.co/now).
-```sh
+```bash
now
```
@@ -1595,10 +1652,14 @@ The `req` and `res` fields of the `context` object passed to `getInitialProps` a
## Multi Zones
-
+
+
+
A zone is a single deployment of a Next.js app. Just like that, you can have multiple zones. Then you can merge them as a single app.
@@ -1651,6 +1712,8 @@ For the production deployment, you can use the [path alias](https://zeit.co/docs
We’re ecstatic about both the developer experience and end-user performance, so we decided to share it with the community.
+
+
How big is it?
@@ -1659,6 +1722,8 @@ A small Next main bundle is around 65kb gzipped.
+
+
Is this like `create-react-app`?
@@ -1678,12 +1743,16 @@ If you want to create re-usable React components that you can embed in your Next
+
+
How do I use CSS-in-JS solutions?
Next.js bundles [styled-jsx](https://github.com/zeit/styled-jsx) supporting scoped css. However you can use any CSS-in-JS solution in your Next app by just including your favorite library [as mentioned before](#css-in-js) in the document.
+
+
What syntactic features are transpiled? How do I change them?
@@ -1693,6 +1762,8 @@ See the documentation about [customizing the babel config](#customizing-babel-c
+
+
Why a new Router?
@@ -1711,6 +1782,8 @@ We tested the flexibility of the routing with some interesting scenarios. For an
+
+
How do I define a custom fancy route?
@@ -1719,12 +1792,16 @@ We [added](#custom-server-and-routing) the ability to map between an arbitrary U
On the client side, we have a parameter call `as` on `` that _decorates_ the URL differently from the URL it _fetches_.
+
+
How do I fetch data?
It’s up to you. `getInitialProps` is an `async` function (or a regular function that returns a `Promise`). It can retrieve data from anywhere.
+
+
Can I use it with GraphQL?
@@ -1732,18 +1809,24 @@ Yes! Here's an example with [Apollo](./examples/with-apollo).
+
+
Can I use it with Redux?
Yes! Here's an [example](./examples/with-redux)
+
+
Can I use Next with my favorite Javascript library or toolkit?
Since our first release we've had **many** example contributions, you can check them out in the [examples](./examples) directory
+
+
What is this inspired by?
@@ -1757,6 +1840,8 @@ As we were researching options for server-rendering React that didn’t involve
+
+
## Contributing
Please see our [contributing.md](./contributing.md)