From d0cbed26081fdcd55865a9b53c29178d851b1d7d Mon Sep 17 00:00:00 2001 From: thinkxl Date: Mon, 11 Feb 2019 13:21:33 -0600 Subject: [PATCH 1/3] convert export default anonymous functions into named functions --- packages/next/README.md | 114 +++++++++++++++++++++++++++++----------- 1 file changed, 82 insertions(+), 32 deletions(-) diff --git a/packages/next/README.md b/packages/next/README.md index 6ab004c8c5d8f..c751e16ae42a9 100644 --- a/packages/next/README.md +++ b/packages/next/README.md @@ -115,7 +115,9 @@ 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!
+const Home = () =>
Welcome to next.js!
+ +export default Home ``` and then just run `npm run dev` and go to `http://localhost:3000`. To use another port, you can run `npm run dev -- -p `. @@ -136,11 +138,13 @@ Every `import` you declare gets bundled and served with each page. That means pa ```jsx import cowsay from 'cowsay-browser' -export default () => ( +const CowsayHi = () => ( 
     {cowsay.say({ text: 'hi there!' })}
) + +export default CowsayHi ``` ### CSS @@ -159,7 +163,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 () => ( +const HelloWorld = () => (
Hello world

scoped!

@@ -183,6 +187,8 @@ export default () => ( `}
) + +export default HelloWorld ``` Please see the [styled-jsx documentation](https://www.npmjs.com/package/styled-jsx) for more examples. @@ -208,7 +214,9 @@ 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

+const HiThere = () =>

hi 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 ``](#user-content-custom-document) component that wraps each page. @@ -227,7 +235,9 @@ To support importing `.css`, `.scss`, `.less` or `.styl` files you can use these 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 () => my image +const Image = () => my image + +export default Image ``` _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,34 +259,38 @@ We expose a built-in component for appending elements to the `` of the pag ```jsx import Head from 'next/head' -export default () => ( +const Head = () => (
- + My page title - +

Hello world!

) + +export default Head ``` To avoid duplicate tags in your `` you can use the `key` property, which will make sure the tag is only rendered once: ```jsx -import Head from 'next/head' +import NextHead from 'next/head' -export default () => ( +const Head = () => (
- + My page title - - + + - +

Hello world!

) + +export default Head ``` In this case only the second `` is rendered. @@ -301,7 +315,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 +329,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`. @@ -384,7 +400,7 @@ Consider these two pages: // pages/index.js import Link from 'next/link' -export default () => ( +const Home = () => (
Click{' '} @@ -393,11 +409,15 @@ export default () => ( to read more
) + +export default Home ``` ```jsx // pages/about.js -export default () =>

Welcome to About!

+const About = () =>

Welcome to About!

+ +export default About ``` **Custom routes (using props from URL)** @@ -414,7 +434,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 +443,8 @@ Example: return

My 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,7 +485,7 @@ The component `` can also receive an URL object and it will automatically // pages/index.js import Link from 'next/link' -export default () => ( +const Home = () => (
Click{' '} @@ -472,6 +494,8 @@ export default () => ( 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,7 +508,7 @@ The default behaviour for the `` component is to `push` a new url into the // pages/index.js import Link from 'next/link' -export default () => ( +const Home = () => (
Click{' '} @@ -493,6 +517,8 @@ export default () => ( to read more
) + +export default Home ``` ##### Using a component that supports `onClick` @@ -503,7 +529,7 @@ export default () => ( // pages/index.js import Link from 'next/link' -export default () => ( +const Home = () => (
Click{' '} @@ -511,6 +537,8 @@ export default () => (
) + +export default Home ``` ##### Forcing the Link to expose `href` to its child @@ -523,13 +551,15 @@ 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 }) => ( +const NavLink = ({ href, name }) => ( {name} ) + +export default NavLink ``` ##### Disabling the scroll changes to top on page @@ -558,11 +588,13 @@ You can also do client-side page transitions using the `next/router` ```jsx import Router from 'next/router' -export default () => ( +const ReadMore = () => (
Click Router.push('/about')}>here to read more
) + +export default ReadMore ``` #### Intercepting `popstate` @@ -615,11 +647,13 @@ const handler = () => { }) } -export default () => ( +const ReadMore = () => (
Click here to read more
) + +export default ReadMore ``` This uses the same exact parameters as in the `` component. @@ -773,8 +807,7 @@ 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 () => ( +const Header = () => ( ) + +export default Header ``` #### Imperatively @@ -804,7 +839,7 @@ Most prefetching needs are addressed by ``, but we also expose an impera ```jsx import { withRouter } from 'next/router' -export default withRouter(({ router }) => ( +const MyLink = withRouter(({ router }) => (
setTimeout(() => router.push('/dynamic'), 100)}> A route transition will happen after 100ms @@ -813,6 +848,8 @@ export default withRouter(({ router }) => ( router.prefetch('/dynamic')}
) + +export default 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 +1041,15 @@ import dynamic from 'next/dynamic' const DynamicComponent = dynamic(() => import('../components/hello')) -export default () => ( +const Home = () => (

HOME PAGE is here!

) + +export default Home ``` #### 2. With Custom Loading Component @@ -1022,13 +1061,15 @@ const DynamicComponentWithCustomLoading = dynamic(() => import('../components/he loading: () =>

...

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

HOME PAGE is here!

) + +export default Home ``` #### 3. With No SSR @@ -1040,13 +1081,15 @@ const DynamicComponentWithNoSSR = dynamic(() => import('../components/hello3'), ssr: false }) -export default () => ( +const Home = () => (

HOME PAGE is here!

) + +export default Home ``` #### 4. With Multiple Modules At Once @@ -1073,7 +1116,9 @@ const HelloBundle = dynamic({ }) -export default () => +const DynamicBundle = + +export default DynamicBundle ``` ### Custom `` @@ -1205,6 +1250,7 @@ export default class MyDocument extends Document { return initialProps } } + ``` ### Custom error handling @@ -1232,6 +1278,8 @@ export default class Error extends React.Component { ) } } + +export ``` ### Reusing the built-in error page @@ -1617,9 +1665,11 @@ 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 () =>
+const MyImage = () =>
logo
+ +export default MyImage ``` ### Starting the server on alternative hostname From 05c0359f580f1e3177580d6195b912d1518bb4ce Mon Sep 17 00:00:00 2001 From: thinkxl Date: Mon, 11 Feb 2019 14:41:25 -0600 Subject: [PATCH 2/3] change examples to function declaration and split export in classes --- packages/next/README.md | 404 +++++++++++++++++++++++----------------- 1 file changed, 229 insertions(+), 175 deletions(-) diff --git a/packages/next/README.md b/packages/next/README.md index c751e16ae42a9..d4ac4f2b25b7f 100644 --- a/packages/next/README.md +++ b/packages/next/README.md @@ -115,7 +115,9 @@ After that, the file-system is the main API. Every `.js` file becomes a route th Populate `./pages/index.js` inside your project: ```jsx -const Home = () =>
Welcome to next.js!
+function Home() { + return
Welcome to next.js!
+} export default Home ``` @@ -138,11 +140,13 @@ Every `import` you declare gets bundled and served with each page. That means pa ```jsx import cowsay from 'cowsay-browser' -const CowsayHi = () => ( - 
-    {cowsay.say({ text: 'hi there!' })}
-
-) +function CowsayHi() { + return ( + 
+      {cowsay.say({ text: 'hi there!' })}
+
+ ) +} export default CowsayHi ``` @@ -163,30 +167,32 @@ export default CowsayHi 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 -const HelloWorld = () => ( -
- Hello world -

scoped!

- - -
-) + @media (max-width: 600px) { + div { + background: blue; + } + } + `} + +
+ ) +} export default HelloWorld ``` @@ -214,7 +220,9 @@ 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 -const HiThere = () =>

hi there

+function HiThere() { + return

hi there

+} export default HiThere ``` @@ -235,9 +243,11 @@ To support importing `.css`, `.scss`, `.less` or `.styl` files you can use these Create a folder called `static` in your project root directory. From your code you can then reference those files with `/static/` URLs: ```jsx -const Image = () => my image +function MyImage() { + return my image +} -export default Image +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._ @@ -257,17 +267,19 @@ _Note: Don't name the `static` directory anything else. The name is required and We expose a built-in component for appending elements to the `` of the page. ```jsx -import Head from 'next/head' - -const Head = () => ( -
- - My page title - - -

Hello world!

-
-) +import NextHead from 'next/head' + +function Head() { + return ( +
+ + My page title + + +

Hello world!

+
+ ) +} export default Head ``` @@ -277,18 +289,20 @@ To avoid duplicate tags in your `` you can use the `key` property, which w ```jsx import NextHead from 'next/head' -const Head = () => ( -
- - My page title - - - - - -

Hello world!

-
-) +function Head() { + return ( +
+ + My page title + + + + + +

Hello world!

+
+ ) +} export default Head ``` @@ -351,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 }) => -
- 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') @@ -400,22 +413,26 @@ Consider these two pages: // pages/index.js import Link from 'next/link' -const Home = () => ( -
- Click{' '} - - here - {' '} - to read more -
-) +function Home() { + return ( +
+ Click{' '} + + here + {' '} + to read more +
+ ) +} export default Home ``` ```jsx // pages/about.js -const About = () =>

Welcome to About!

+function About() { + return

Welcome to About!

+} export default About ``` @@ -485,15 +502,17 @@ The component `` can also receive an URL object and it will automatically // pages/index.js import Link from 'next/link' -const Home = () => ( -
- Click{' '} - - here - {' '} - to read more -
-) +function Home() { + return ( +
+ Click{' '} + + here + {' '} + to read more +
+ ) +} export default Home ``` @@ -508,15 +527,17 @@ The default behaviour for the `` component is to `push` a new url into the // pages/index.js import Link from 'next/link' -const Home = () => ( -
- Click{' '} - - here - {' '} - to read more -
-) +function Home() { + return ( +
+ Click{' '} + + here + {' '} + to read more +
+ ) +} export default Home ``` @@ -529,14 +550,16 @@ export default Home // pages/index.js import Link from 'next/link' -const Home = () => ( -
- Click{' '} - - image - -
-) +function Home() { + return ( +
+ Click{' '} + + image + +
+ ) +} export default Home ``` @@ -551,13 +574,15 @@ 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' -const NavLink = ({ href, name }) => ( - - - {name} - - -) +function NavLink({ href, name }) { + return ( + + + {name} + + + ) +} export default NavLink ``` @@ -588,11 +613,13 @@ You can also do client-side page transitions using the `next/router` ```jsx import Router from 'next/router' -const ReadMore = () => ( -
- Click Router.push('/about')}>here to read more -
-) +function ReadMore() { + return ( +
+ Click Router.push('/about')}>here to read more +
+ ) +} export default ReadMore ``` @@ -647,11 +674,13 @@ const handler = () => { }) } -const ReadMore = () => ( -
- Click here to read more -
-) +function ReadMore() { + return ( +
+ Click here to read more +
+ ) +} export default ReadMore ``` @@ -758,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' @@ -807,27 +836,29 @@ You can add `prefetch` prop to any `` and Next.js will prefetch those page ```jsx import Link from 'next/link' -const Header = () => ( - -) +function Header() { + return ( + + ) +} export default Header ``` @@ -839,17 +870,19 @@ Most prefetching needs are addressed by ``, but we also expose an impera ```jsx import { withRouter } from 'next/router' -const MyLink = 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 MyLink +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. @@ -1041,13 +1074,15 @@ import dynamic from 'next/dynamic' const DynamicComponent = dynamic(() => import('../components/hello')) -const Home = () => ( -
-
- -

HOME PAGE is here!

-
-) +function Home() { + return ( +
+
+ +

HOME PAGE is here!

+
+ ) +} export default Home ``` @@ -1061,13 +1096,15 @@ const DynamicComponentWithCustomLoading = dynamic(() => import('../components/he loading: () =>

...

}) -const Home () => ( -
-
- -

HOME PAGE is here!

-
-) +function Home() { + return ( +
+
+ +

HOME PAGE is here!

+
+ ) +} export default Home ``` @@ -1081,13 +1118,15 @@ const DynamicComponentWithNoSSR = dynamic(() => import('../components/hello3'), ssr: false }) -const Home = () => ( -
-
- -

HOME PAGE is here!

-
-) +function Home() { + return ( +
+
+ +

HOME PAGE is here!

+
+ ) +} export default Home ``` @@ -1116,7 +1155,9 @@ const HelloBundle = dynamic({ }) -const DynamicBundle = +function DynamicBundle() { + return +} export default DynamicBundle ``` @@ -1146,7 +1187,7 @@ To override, create the `./pages/_app.js` file and override the App class as sho import React from 'react' import App, { Container } from 'next/app' -export default class MyApp extends App { +class MyApp extends App { static async getInitialProps({ Component, ctx }) { let pageProps = {} @@ -1167,6 +1208,8 @@ export default class MyApp extends App { ) } } + +export default MyApp ``` ### Custom `` @@ -1194,7 +1237,7 @@ Pages in `Next.js` skip the definition of the surrounding document's markup. For // ./pages/_document.js import Document, { Head, Main, NextScript } from 'next/document' -export default class MyDocument extends Document { +class MyDocument extends Document { static async getInitialProps(ctx) { const initialProps = await Document.getInitialProps(ctx) return { ...initialProps } @@ -1214,6 +1257,8 @@ export default class MyDocument extends Document { ) } } + +export default MyDocument ``` All of ``, `
` and `` are required for page to be properly rendered. @@ -1233,7 +1278,7 @@ that need to wrap the application to properly work with server-rendering. 🚧 ```js import Document from 'next/document' -export default class MyDocument extends Document { +class MyDocument extends Document { static async getInitialProps(ctx) { const originalRenderPage = ctx.renderPage @@ -1251,6 +1296,7 @@ export default class MyDocument extends Document { } } +export default MyDocument ``` ### Custom error handling @@ -1262,7 +1308,7 @@ export default class MyDocument extends Document { ```jsx import React from 'react' -export default class Error extends React.Component { +class Error extends React.Component { static getInitialProps({ res, err }) { const statusCode = res ? res.statusCode : err ? err.statusCode : null; return { statusCode } @@ -1279,7 +1325,7 @@ export default class Error extends React.Component { } } -export +export default Error ``` ### Reusing the built-in error page @@ -1291,7 +1337,7 @@ import React from 'react' import Error from 'next/error' import fetch from 'isomorphic-unfetch' -export default class Page extends React.Component { +class Page extends React.Component { static async getInitialProps() { const res = await fetch('https://api.github.com/repos/zeit/next.js') const errorCode = res.statusCode > 200 ? res.statusCode : false @@ -1312,6 +1358,8 @@ export default class Page extends React.Component { ) } } + +export default Page ``` > If you have created a custom error page you have to import your own `_error` component from `./_error` instead of `next/error` @@ -1625,9 +1673,11 @@ This will allow you to use `process.env.customKey` in your code. For example: ```jsx // pages/index.js -export default function Index() { +function Index() { return

The value of customEnv is: {process.env.customEnv}

} + +export default Index ``` #### Runtime configuration @@ -1665,9 +1715,13 @@ 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 -const MyImage = () =>
- logo -
+function MyImage() { + return ( +
+ logo +
+ ) +} export default MyImage ``` From d2501e782ccec535d8a5cd8c54a52517699aba17 Mon Sep 17 00:00:00 2001 From: thinkxl Date: Mon, 11 Feb 2019 16:29:50 -0600 Subject: [PATCH 3/3] change NextHead name to Head and rename component --- packages/next/README.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/next/README.md b/packages/next/README.md index d4ac4f2b25b7f..0960df74a74f4 100644 --- a/packages/next/README.md +++ b/packages/next/README.md @@ -267,44 +267,44 @@ _Note: Don't name the `static` directory anything else. The name is required and We expose a built-in component for appending elements to the `` of the page. ```jsx -import NextHead from 'next/head' +import Head from 'next/head' -function Head() { +function IndexPage() { return (
- + My page title - +

Hello world!

) } -export default Head +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: ```jsx -import NextHead from 'next/head' +import Head from 'next/head' -function Head() { +function IndexPage() { return (
- + My page title - - + + - +

Hello world!

) } -export default Head +export default IndexPage ``` In this case only the second `` is rendered.