From c0d031d90ec14535fbbe0ba56b8a27740849ec59 Mon Sep 17 00:00:00 2001 From: Brikou CARRE Date: Fri, 8 Sep 2017 23:22:59 +0200 Subject: [PATCH] Fix coding style of snippets (#2806) --- readme.md | 315 ++++++++++++++++++++++++++++++------------------------ 1 file changed, 175 insertions(+), 140 deletions(-) diff --git a/readme.md b/readme.md index b4ca4e69..32cfe527 100644 --- a/readme.md +++ b/readme.md @@ -77,9 +77,7 @@ After that, the file-system is the main API. Every `.js` file becomes a route th Populate `./pages/index.js` inside your project: ```jsx -export default () => ( -
Welcome to next.js!
-) +export default () =>
Welcome to next.js!
``` and then just run `npm run dev` and go to `http://localhost:3000`. To use another port, you can run `npm run dev -- -p `. @@ -99,9 +97,11 @@ Every `import` you declare gets bundled and served with each page. That means pa ```jsx import cowsay from 'cowsay-browser' -export default () => ( - 
{ 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

scoped!

@@ -139,7 +139,6 @@ export default () => ( } `}
-) ``` 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 () => ( -

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 ``](#user-content-custom-document) component that wraps each page @@ -168,9 +165,7 @@ To use more sophisticated CSS-in-JS solutions, you typically have to implement s Create a folder called `static` in your project root directory. From your code you can then reference those files with `/static/` URLs: ```jsx -export default () => ( - -) +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 () =>
My page title @@ -195,7 +191,6 @@ export default () => (

Hello world!

-) ``` _Note: The contents of `` get cleared upon unmounting the component, so make sure each page completely defines what it needs in ``, without making assumptions about what other pages added_ @@ -211,16 +206,19 @@ When you need state, lifecycle hooks or **initial data population** you can expo ```jsx import React from 'react' + export default class extends React.Component { - static async getInitialProps ({ req }) { - return req - ? { userAgent: req.headers['user-agent'] } - : { userAgent: navigator.userAgent } + static async getInitialProps({ req }) { + const userAgent = req ? req.headers['user-agent'] : navigator.userAgent + return { userAgent } } - render () { - return
- 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 }) => ( - - { name } + +export default ({ href, name }) => + + + {name} + -) ``` #### Imperatively @@ -383,9 +406,10 @@ You can also do client-side page transitions using the `next/router` ```jsx import Router from 'next/router' -export default () => ( -
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!

-) ``` #### 2. With Custom Loading Component -```js +```jsx import dynamic from 'next/dynamic' + const DynamicComponentWithCustomLoading = dynamic( import('../components/hello2'), { - loading: () => (

...

) + loading: () =>

...

} ) -export default () => ( +export default () =>

HOME PAGE is here!

-) ``` #### 3. With No SSR -```js +```jsx import dynamic from 'next/dynamic' -const DynamicComponentWithNoSSR = dynamic( - import('../components/hello3'), - { ssr: false } -) -export default () => ( +const DynamicComponentWithNoSSR = dynamic(import('../components/hello3'), { + ssr: false +}) + +export default () =>

HOME PAGE is here!

-) ``` #### 4. With Multiple Modules At Once -```js +```jsx import dynamic from 'next/dynamic' const HelloBundle = dynamic({ - modules: (props) => { + modules: props => { const components = { Hello1: import('../components/hello1'), Hello2: import('../components/hello2') @@ -743,18 +776,17 @@ const HelloBundle = dynamic({ return components }, - render: (props, { Hello1, Hello2 }) => ( + render: (props, { Hello1, Hello2 }) =>
-

{props.title}

+

+ {props.title} +

- ) }) -export default () => ( - -) +export default () => ``` ### Custom `` @@ -773,24 +805,24 @@ import Document, { Head, Main, NextScript } from 'next/document' import flush from 'styled-jsx/server' export default class MyDocument extends Document { - static getInitialProps ({ renderPage }) { - const {html, head, errorHtml, chunks} = renderPage() + static getInitialProps({ renderPage }) { + const { html, head, errorHtml, chunks } = renderPage() const styles = flush() return { html, head, errorHtml, chunks, styles } } - render () { + render() { return ( - - - - - - {this.props.customValue} -
- - - + + + + + + {this.props.customValue} +
+ + + ) } } @@ -808,19 +840,22 @@ __Note: React-components outside of `
` will not be initialised by the br ```jsx import React from 'react' + export default class Error extends React.Component { - static getInitialProps ({ res, jsonPageRes }) { - const statusCode = res ? res.statusCode : (jsonPageRes ? jsonPageRes.status : null) + static getInitialProps({ res, jsonPageRes }) { + const statusCode = res + ? res.statusCode + : jsonPageRes ? jsonPageRes.status : null return { statusCode } } - render () { + render() { return ( -

{ - 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) { - return + render() { + if (this.props.statusCode) { + return } return ( -
Next 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" + } } ```