- {cowsay.say({ text: 'hi there!' })}
-
-)
+function CowsayHi() {
+ return (
+
+ {cowsay.say({ text: 'hi there!' })}
+
+ )
+}
+
+export default CowsayHi
```
### CSS
@@ -159,30 +167,34 @@ 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 () => (
-
- Hello world
-
-)
+ div {
+ background: red;
+ }
+ @media (max-width: 600px) {
+ div {
+ background: blue;
+ }
+ }
+ `}
+
+
+ )
+}
+
+export default HelloWorld
```
Please see the [styled-jsx documentation](https://www.npmjs.com/package/styled-jsx) for more examples.
@@ -208,7 +220,11 @@ 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!
- - -hi there
+function HiThere() { + returnhi there
+} + +export default HiThere ``` 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 `
+function MyImage() {
+ return
+}
+
+export default MyImage
```
_Note: Don't name the `static` directory anything else. The name is required and is the only directory that Next.js uses for serving static assets._
@@ -249,15 +269,19 @@ We expose a built-in component for appending elements to the `` of the pag
```jsx
import Head from 'next/head'
-export default () => (
-
-
- My page title
-
-
-
-)
+function IndexPage() {
+ return (
+ Hello world!
-
+
+ My page title
+
+
+
+ )
+}
+
+export default IndexPage
```
To avoid duplicate tags in your `` you can use the `key` property, which will make sure the tag is only rendered once:
@@ -265,18 +289,22 @@ To avoid duplicate tags in your `` you can use the `key` property, which w
```jsx
import Head from 'next/head'
-export default () => (
- Hello world!
+
-
- My page title
-
-
-
-
-
-
-)
+function IndexPage() {
+ return (
+ Hello world!
-
+
+ My page title
+
+
+
+
+
+
+ )
+}
+
+export default IndexPage
```
In this case only the second `` is rendered.
@@ -301,7 +329,7 @@ When you need state, lifecycle hooks or **initial data population** you can expo
```jsx
import React from 'react'
-export default class extends React.Component {
+class HelloUA extends React.Component {
static async getInitialProps({ req }) {
const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
return { userAgent }
@@ -315,6 +343,8 @@ export default class extends React.Component {
)
}
}
+
+export default HelloUA
```
Notice that to load data when the page loads, we use `getInitialProps` which is an [`async`](https://zeit.co/blog/async-and-await) static method. It can asynchronously fetch anything that resolves to a JavaScript plain `Object`, which populates `props`.
@@ -335,10 +365,9 @@ _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 }) =>
- Hello world!
+
- Next stars: {stars}
-
+function Page({ stars }) {
+ return Next stars: {stars}
+}
Page.getInitialProps = async ({ req }) => {
const res = await fetch('https://api.github.com/repos/zeit/next.js')
@@ -384,20 +413,28 @@ Consider these two pages:
// pages/index.js
import Link from 'next/link'
-export default () => (
-
- Click{' '}
-
- here
- {' '}
- to read more
-
-)
+function Home() {
+ return (
+
+ Click{' '}
+
+ here
+ {' '}
+ to read more
+
+ )
+}
+
+export default Home
```
```jsx
// pages/about.js
-export default () => Welcome to About!
+function About() { + returnWelcome to About!
+} + +export default About ``` **Custom routes (using props from URL)** @@ -414,7 +451,7 @@ Example: 2. You created the `pages/post.js` ```jsx - export default class extends React.Component { + class Post extends React.Component { static async getInitialProps({query}) { console.log('SLUG', query.slug) return {} @@ -423,6 +460,8 @@ Example: returnMy blog post
} } + + export default Post ``` 3. You add the route to `express` (or any other server) on `server.js` file (this is only for SSR). This will route the url `/post/:slug` to `pages/post.js` and provide `slug` as part of query in getInitialProps. @@ -463,15 +502,19 @@ The component `` can also receive an URL object and it will automatically // pages/index.js import Link from 'next/link' -export default () => ( -
- Click{' '}
-
- here
- {' '}
- to read more
-
-)
+function Home() {
+ return (
+
+ Click{' '}
+
+ here
+ {' '}
+ to read more
+
+ )
+}
+
+export default Home
```
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).
@@ -484,15 +527,19 @@ The default behaviour for the `` component is to `push` a new url into the
// pages/index.js
import Link from 'next/link'
-export default () => (
-
- Click{' '}
-
- here
- {' '}
- to read more
-
-)
+function Home() {
+ return (
+
+ Click{' '}
+
+ here
+ {' '}
+ to read more
+
+ )
+}
+
+export default Home
```
##### Using a component that supports `onClick`
@@ -503,14 +550,18 @@ export default () => (
// pages/index.js
import Link from 'next/link'
-export default () => (
-
- Click{' '}
-
- 
-
-
-)
+function Home() {
+ return (
+
-
-
+ Click{' '}
+
+
+
+
+ )
+}
+
+export default Home
```
##### Forcing the Link to expose `href` to its child
@@ -523,13 +574,17 @@ If child is an `` tag and doesn't have a href attribute we specify it so that
import Link from 'next/link'
import Unexpected_A from 'third-library'
-export default ({ href, name }) => (
-
-
+
+
- Click Router.push('/about')}>here to read more
-
-)
+function ReadMore() {
+ return (
+
+ Click Router.push('/about')}>here to read more
+
+ )
+}
+
+export default ReadMore
```
#### Intercepting `popstate`
@@ -615,11 +674,15 @@ const handler = () => {
})
}
-export default () => (
-
- Click here to read more
-
-)
+function ReadMore() {
+ return (
+
+ Click here to read more
+
+ )
+}
+
+export default ReadMore
```
This uses the same exact parameters as in the `` component.
@@ -724,7 +787,7 @@ If you want to access the `router` object inside any component in your app, you
```jsx
import { withRouter } from 'next/router'
-const ActiveLink = ({ children, router, href }) => {
+function ActiveLink({ children, router, href }) {
const style = {
marginRight: 10,
color: router.pathname === href ? 'red' : 'black'
@@ -773,28 +836,31 @@ You can add `prefetch` prop to any `` and Next.js will prefetch those page
```jsx
import Link from 'next/link'
-// example header component
-export default () => (
-
-)
+function Header() {
+ return (
+
+ )
+}
+
+export default Header
```
#### Imperatively
@@ -804,15 +870,19 @@ Most prefetching needs are addressed by ``, but we also expose an impera
```jsx
import { withRouter } from 'next/router'
-export default withRouter(({ router }) => (
-
- setTimeout(() => router.push('/dynamic'), 100)}>
- A route transition will happen after 100ms
-
- {// but we can prefetch it!
- router.prefetch('/dynamic')}
-
-)
+function MyLink({ router }) {
+ return (
+
+ setTimeout(() => router.push('/dynamic'), 100)}>
+ A route transition will happen after 100ms
+
+ {// but we can prefetch it!
+ router.prefetch('/dynamic')}
+
+ )
+}
+
+export default withRouter(MyLink)
```
The router instance should be only used inside the client side of your app though. In order to prevent any error regarding this subject, when rendering the Router on the server side, use the imperatively prefetch method in the `componentDidMount()` lifecycle method.
@@ -1004,13 +1074,17 @@ import dynamic from 'next/dynamic'
const DynamicComponent = dynamic(() => import('../components/hello'))
-export default () => (
-
-
-)
+function Home() {
+ return (
+ HOME PAGE is here!
-
+
+ )
+}
+
+export default Home
```
#### 2. With Custom Loading Component
@@ -1022,13 +1096,17 @@ const DynamicComponentWithCustomLoading = dynamic(() => import('../components/he
loading: () => HOME PAGE is here!
+...
}) -export default () => ( -
-
-)
+function Home() {
+ return (
+ HOME PAGE is here!
-
+
+ )
+}
+
+export default Home
```
#### 3. With No SSR
@@ -1040,13 +1118,17 @@ const DynamicComponentWithNoSSR = dynamic(() => import('../components/hello3'),
ssr: false
})
-export default () => (
- HOME PAGE is here!
+
-
-)
+function Home() {
+ return (
+ HOME PAGE is here!
-
+
+ )
+}
+
+export default Home
```
#### 4. With Multiple Modules At Once
@@ -1073,7 +1155,11 @@ const HelloBundle = dynamic({
})
-export default () => HOME PAGE is here!
+The value of customEnv is: {process.env.customEnv}
} + +export default Index ``` #### Runtime configuration @@ -1617,9 +1715,15 @@ const {serverRuntimeConfig, publicRuntimeConfig} = getConfig() console.log(serverRuntimeConfig.mySecret) // Will only be available on the server side console.log(publicRuntimeConfig.staticFolder) // Will be available on both server and client -export default () =>
- 
-
+function MyImage() {
+ return (
+
-
+
+
+ )
+}
+
+export default MyImage
```
### Starting the server on alternative hostname
+