{ cowsay.say({ text: 'hi there!' }) }
-)
+
+export default () =>
+
+ {cowsay.say({ text: 'hi there!' })}
+
```
### CSS
@@ -116,7 +116,7 @@ export default () => (
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).
```jsx
-export default () => (
+export default () =>
Hello world
-)
```
Please see the [styled-jsx documentation](https://www.npmjs.com/package/styled-jsx) for more examples.
@@ -156,9 +155,7 @@ Please see the [styled-jsx documentation](https://www.npmjs.com/package/styled-j
It's possible to use any existing CSS-in-JS solution. The simplest one is inline styles:
```jsx
-export default () => (
- scoped!
@@ -139,7 +139,6 @@ export default () => ( } `}hi there
-) +export default () =>hi there
``` To use more sophisticated CSS-in-JS solutions, you typically have to implement style flushing for server-side rendering. We enable this by allowing you to define your own [custom `
-)
+export default () =>
```
### Populating ``
@@ -187,7 +182,8 @@ We expose a built-in component for appending elements to the `` of the pag
```jsx
import Head from 'next/head'
-export default () => (
+
+export default () =>
Hello world!
- Hello World {this.props.userAgent}
-
+
+ render() {
+ return (
+
+ Hello World {this.props.userAgent}
+
+ )
}
}
```
@@ -241,7 +239,10 @@ _Note: `getInitialProps` can **not** be used in children components. Only in `pa
You can also define the `getInitialProps` lifecycle method for stateless components:
```jsx
-const Page = ({ stars }) => Next stars: {stars}
+const Page = ({ stars }) =>
+
+ Next stars: {stars}
+
Page.getInitialProps = async ({ req }) => {
const res = await fetch('https://api.github.com/repos/zeit/next.js')
@@ -278,16 +279,20 @@ Client-side transitions between routes can be enabled via a `` component.
```jsx
// pages/index.js
import Link from 'next/link'
-export default () => (
- Click here to read more
-)
+
+export default () =>
+
+ Click{' '}
+
+ here
+ {' '}
+ to read more
+
```
```jsx
// pages/about.js
-export default () => (
- Welcome to About!
-) +export default () =>Welcome to About!
``` __Note: use [``](#prefetching-pages) for maximum performance, to link and prefetch in the background at the same time__ @@ -322,9 +327,15 @@ The component `` can also receive an URL object and it will automatically ```jsx // pages/index.js import Link from 'next/link' -export default () => ( -Click here to read more
-)
+
+export default () =>
+
+ Click{' '}
+
+ here
+ {' '}
+ to read more
+
```
That will generate the URL string `/about?name=Zeit`, you can use every property as defined in the [Node.js URL module documentation](https://nodejs.org/api/url.html#url_url_strings_and_url_objects).
@@ -336,9 +347,15 @@ The default behaviour for the `` component is to `push` a new url into the
```jsx
// pages/index.js
import Link from 'next/link'
-export default () => (
- Click here to read more
-)
+
+export default () =>
+
+ Click{' '}
+
+ here
+ {' '}
+ to read more
+
```
##### Using a component that support `onClick`
@@ -348,24 +365,30 @@ export default () => (
```jsx
// pages/index.js
import Link from 'next/link'
-export default () => (
- Click 
-)
+
+export default () =>
+
+ Click{' '}
+
+
+
+
```
-##### Forcing the Link to expose `href` to its child
+##### Forcing the Link to expose `href` to its child
If child is an `` tag and doesn't have a href attribute we specify it so that the repetition is not needed by the user. However, sometimes, you’ll want to pass an `` tag inside of a wrapper and the `Link` won’t recognize it as a *hyperlink*, and, consequently, won’t transfer its `href` to the child. In cases like that, you should define a boolean `passHref` property to the `Link`, forcing it to expose its `href` property to the child.
```jsx
import Link from 'next/link'
import Unexpected_A from 'third-library'
-
-export default ({ href, name }) => (
-
-
+
+ Click Router.push('/about')}>here to read more
-)
+export default () =>
+
+ Click Router.push('/about')}>here to read more
+
```
Above `Router` object comes with the following API:
@@ -407,14 +431,16 @@ You can use an URL object the same way you use it in a `` component to `pu
```jsx
import Router from 'next/router'
-const handler = () => Router.push({
- pathname: '/about',
- query: { name: 'Zeit' }
-})
+const handler = () =>
+ Router.push({
+ pathname: '/about',
+ query: { name: 'Zeit' }
+ })
-export default () => (
- Click here to read more
-)
+export default () =>
+
+ Click here to read more
+
```
This uses of the same exact parameters as in the `` component.
@@ -435,7 +461,7 @@ Here's a list of supported events:
Here's how to properly listen to the router event `routeChangeStart`:
```js
-Router.onRouteChangeStart = (url) => {
+Router.onRouteChangeStart = url => {
console.log('App is changing to: ', url)
}
```
@@ -461,7 +487,7 @@ If you change a route while in between a new deployment, we can't navigate the a
But you can customize that via `Route.onAppUpdated` event like this:
```js
-Router.onAppUpdated = (nextUrl) => {
+Router.onAppUpdated = nextUrl => {
// persist the local state
location.href = nextUrl
}
@@ -480,7 +506,7 @@ Shallow routing allows you to change the URL without running `getInitialProps`.
You can do this by invoking either `Router.push` or `Router.replace` with the `shallow: true` option. Here's an example:
-```jsx
+```js
// Current URL is "/"
const href = '/?counter=10'
const as = href
@@ -491,7 +517,7 @@ Now, the URL is updated to `/?counter=10`. You can see the updated URL with `thi
You can watch for URL changes via [`componentWillReceiveProps`](https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops) hook as shown below:
-```jsx
+```js
componentWillReceiveProps(nextProps) {
const { pathname, query } = nextProps.url
// fetch data based on the new query
@@ -566,15 +592,26 @@ You can add `prefetch` prop to any `` and Next.js will prefetch those page
import Link from 'next/link'
// example header component
-export default () => (
+export default () =>
-)
```
#### Imperatively
@@ -583,17 +620,15 @@ Most prefetching needs are addressed by ``, but we also expose an impera
```jsx
import Router from 'next/router'
-export default ({ url }) => (
+
+export default ({ url }) =>
- setTimeout(() => url.pushTo('/dynamic'), 100) }>
+ setTimeout(() => url.pushTo('/dynamic'), 100)}>
A route transition will happen after 100ms
- {
- // but we can prefetch it!
- Router.prefetch('/dynamic')
- }
+ {// but we can prefetch it!
+ Router.prefetch('/dynamic')}
-)
```
### Custom server and routing
@@ -637,8 +672,7 @@ app.prepare().then(() => {
} else {
handle(req, res, parsedUrl)
}
- })
- .listen(3000, (err) => {
+ }).listen(3000, err => {
if (err) throw err
console.log('> Ready on http://localhost:3000')
})
@@ -676,64 +710,63 @@ Here are a few ways to use dynamic imports.
#### 1. Basic Usage (Also does SSR)
-```js
+```jsx
import dynamic from 'next/dynamic'
+
const DynamicComponent = dynamic(import('../components/hello'))
-export default () => (
+export default () =>
HOME PAGE is here!
...
) + loading: () =>...
} ) -export default () => ( +export default () =>HOME PAGE is here!
HOME PAGE is here!
-
- )
})
-export default () => (
- {props.title}
++ {props.title} +
{ - this.props.statusCode - ? `An error ${this.props.statusCode} occurred on server` - : 'An error occurred on client' - }
++ {this.props.statusCode + ? `An error ${this.props.statusCode} occurred on server` + : 'An error occurred on client'} +
) } } @@ -836,20 +871,23 @@ import Error from 'next/error' import fetch from 'isomorphic-fetch' export default class Page extends React.Component { - static async getInitialProps () { + static async getInitialProps() { const res = await fetch('https://api.github.com/repos/zeit/next.js') const statusCode = res.statusCode > 200 ? res.statusCode : false const json = await res.json() + return { statusCode, stars: json.stargazers_count } } - render () { - if(this.props.statusCode) { - returnNext stars: {this.props.stars}
+
+ Next stars: {this.props.stars}
+
)
}
}
@@ -863,7 +901,7 @@ For custom advanced behavior of Next.js, you can create a `next.config.js` in th
Note: `next.config.js` is a regular Node.js module, not a JSON file. It gets used by the Next server and build phases, and not included in the browser build.
-```javascript
+```js
// next.config.js
module.exports = {
/* config options here */
@@ -874,7 +912,7 @@ module.exports = {
You can specify a name to use for a custom build directory. For example, the following config will create a `build` folder instead of a `.next` folder. If no configuration is specified then next will create a `.next` folder.
-```javascript
+```js
// next.config.js
module.exports = {
distDir: 'build'
@@ -902,7 +940,7 @@ module.exports = {
// Important: return the modified config
return config
},
- webpackDevMiddleware: (config) => {
+ webpackDevMiddleware: config => {
// Perform customizations to webpack dev middleware config
// Important: return the modified config
@@ -928,12 +966,9 @@ This is designed so that you are not surprised by modifications we could make to
Here's an example `.babelrc` file:
-```js
+```json
{
- "presets": [
- "next/babel",
- "stage-0"
- ],
+ "presets": ["next/babel", "stage-0"]
}
```
@@ -998,15 +1033,15 @@ Simply develop your app as you normally do with Next.js. Then create a custom Ne
```js
// next.config.js
module.exports = {
- exportPathMap: function () {
+ exportPathMap: function() {
return {
- "/": { page: "/" },
- "/about": { page: "/about" },
- "/p/hello-nextjs": { page: "/post", query: { title: "hello-nextjs" } },
- "/p/learn-nextjs": { page: "/post", query: { title: "learn-nextjs" } },
- "/p/deploy-nextjs": { page: "/post", query: { title: "deploy-nextjs" } }
+ '/': { page: '/' },
+ '/about': { page: '/about' },
+ '/p/hello-nextjs': { page: '/post', query: { title: 'hello-nextjs' } },
+ '/p/learn-nextjs': { page: '/post', query: { title: 'learn-nextjs' } },
+ '/p/deploy-nextjs': { page: '/post', query: { title: 'deploy-nextjs' } }
}
- },
+ }
}
```
@@ -1023,9 +1058,9 @@ For that you may need to add a NPM script to `package.json` like this:
```json
{
- "scripts": {
- "build": "next build && next export"
- }
+ "scripts": {
+ "build": "next build && next export"
+ }
}
```