Merge branch 'canary' into cms-takeshape

* canary: (47 commits) v9.3.1-canary.5 Update @next/bundle-analyzer dependencies (vercel#11068) Update preset.ts: Remove any and use updated Node.js types (vercel#11075) Upgrade styled-jsx (vercel#11070) Update ssr-caching example with getServerSideProps (vercel#11032) Add support for static 404 when _error does not have custom GIP (vercel#11062) update form handler example (vercel#11059) Update with-loading example to SSG (vercel#11050) Upgrade next.js version on datocms example (vercel#11039) Update custom-server-express example with getServerSideProps (vercel#11035) Use getServerSideProps (vercel#11057) v9.3.1-canary.4 Updated analyze-bundles example (vercel#11031) Update custom-server-fastify example to not use internal fn (vercel#11040) Correct Cache-Control Behavior for GS(S)P (vercel#11022) Update next-sass example to use built-in sass support (vercel#11015) Update with-zeit-fetch example to use SSG (vercel#11026) Update amp-first example to use GSSP (vercel#11028) Fix Test for Windows feat: update api-routes example to SSG (vercel#11019) ...
chibicode · Mar 16, 2020 · 3666120 · 3666120
2 parents 34a2c91 + 30cf4d5
commit 3666120
Show file tree

Hide file tree

Showing 136 changed files with 2,341 additions and 634 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -3,4 +3,4 @@ node_modules
 **/_next/**
 **/dist/**
 examples/with-ioc/**
-examples/with-kea/**
+examples/with-kea/**
diff --git a/.prettierignore b/.prettierignore
@@ -1,4 +1,4 @@
 node_modules
 **/.next/**
 **/_next/**
-**/dist/**
+**/dist/**
diff --git a/.prettierignore_staged b/.prettierignore_staged
@@ -1,3 +1,3 @@
 **/.next/**
 **/_next/**
-**/dist/**
+**/dist/**
diff --git a/docs/advanced-features/preview-mode.md b/docs/advanced-features/preview-mode.md
@@ -153,7 +153,7 @@ https://<your-site>/api/preview?secret=<token>&slug=<path>
 
 Take a look at the following examples to learn more:
 
-- [DatoCMS Example](https://github.com/zeit/next.js/tree/canary/examples/cms-datocms)
+- [DatoCMS Example](https://github.com/zeit/next.js/tree/canary/examples/cms-datocms) ([Demo](https://next-blog-datocms.now.sh/))
 - [TakeShape Example](https://github.com/zeit/next.js/tree/canary/examples/cms-takeshape)
 
 ## More Details

diff --git a/docs/basic-features/data-fetching.md b/docs/basic-features/data-fetching.md
@@ -152,8 +152,8 @@ The `paths` key determines which paths will be pre-rendered. For example, suppos
 ```js
 return {
   paths: [
-    { params: { id: 1 } },
-    { params: { id: 2 } }
+    { params: { id: '1' } },
+    { params: { id: '2' } }
   ],
   fallback: ...
 }
@@ -229,7 +229,7 @@ If `fallback` is `true`, then the behavior of `getStaticProps` changes:
 In the “fallback” version of a page:
 
 - The page’s props will be empty.
-- Using the [router](/docs/api-reference/next/router.md)), you can detect if the fallback is being rendered, `router.isFallback` will be `true`.
+- Using the [router](/docs/api-reference/next/router.md), you can detect if the fallback is being rendered, `router.isFallback` will be `true`.
 
 Here’s an example that uses `isFallback`:
 
@@ -366,7 +366,7 @@ export default Page
 
 ### When should I use `getServerSideProps`?
 
-You should use `getServerSideProps` only if you need to pre-render a page whose data must be fetched at request time. Time to first byte (TTFB) will be slower than `getStaticProps` because the server must compute the result on every request, and the result cannot be cached by a CDN without extra .
+You should use `getServerSideProps` only if you need to pre-render a page whose data must be fetched at request time. Time to first byte (TTFB) will be slower than `getStaticProps` because the server must compute the result on every request, and the result cannot be cached by a CDN without extra configuration.
 
 If you don’t need to pre-render the data, then you should consider fetching data on the client side. [Click here to learn more](#fetching-data-on-the-client-side).
 
@@ -389,7 +389,7 @@ export const getServerSideProps: GetServerSideProps = async context => {
 `getServerSideProps` only runs on server-side and never runs on the browser. If a page uses `getServerSideProps` , then:
 
 - When you request this page directly, `getServerSideProps` runs at the request time, and this page will be pre-rendered with the returned props.
-- When you request this page on client-side page transitions through `next/link` ([documentation](/docs/api-reference/next/link.md)), Next.js sends an API request to server, which runs `getServerSideProps`. It’ll return a JSON that contains the result of running `getServerSideProps`, and the JSON will be used to render the page. All this work will be handled automatically by Next.js, so you don’t need to do anything extra as long as you have `getServerSideProps` defined.
+- When you request this page on client-side page transitions through `next/link` ([documentation](/docs/api-reference/next/link.md)) or `next/router` ([documentation](/docs/api-reference/next/router.md)), Next.js sends an API request to the server, which runs `getServerSideProps`. It’ll return JSON that contains the result of running `getServerSideProps`, and the JSON will be used to render the page. All this work will be handled automatically by Next.js, so you don’t need to do anything extra as long as you have `getServerSideProps` defined.
 
 #### Only allowed in a page
 
@@ -428,7 +428,7 @@ function Profile() {
 
 Take a look at the following examples to learn more:
 
-- [DatoCMS Example](https://github.com/zeit/next.js/tree/canary/examples/cms-datocms)
+- [DatoCMS Example](https://github.com/zeit/next.js/tree/canary/examples/cms-datocms) ([Demo](https://next-blog-datocms.now.sh/))
 - [TakeShape Example](https://github.com/zeit/next.js/tree/canary/examples/cms-takeshape)
 
 ## Learn more

diff --git a/docs/basic-features/pages.md b/docs/basic-features/pages.md
@@ -246,7 +246,7 @@ We've discussed two forms of pre-rendering for Next.js.
 
 Take a look at the following examples to learn more:
 
-- [DatoCMS Example](https://github.com/zeit/next.js/tree/canary/examples/cms-datocms)
+- [DatoCMS Example](https://github.com/zeit/next.js/tree/canary/examples/cms-datocms) ([Demo](https://next-blog-datocms.now.sh/))
 - [TakeShape Example](https://github.com/zeit/next.js/tree/canary/examples/cms-takeshape)
 
 ## Learn more

diff --git a/errors/built-in-css-disabled.md b/errors/built-in-css-disabled.md
@@ -0,0 +1,18 @@
+# Built-in CSS Support Disabled
+
+#### Why This Error Occurred
+
+Custom CSS configuration was added in `next.config.js` which disables the built-in CSS/SCSS support to prevent conflicting configuration.
+
+A legacy plugin such as `@zeit/next-css` being added in `next.config.js` can cause this message.
+
+#### Possible Ways to Fix It
+
+If you would like to leverage the built-in CSS/SCSS support you can remove any custom CSS configuration or any plugins like `@zeit/next-css` or `@zeit/next-sass` in your `next.config.js`.
+
+If you would prefer not to leverage the built-in support you can ignore this message.
+
+### Useful Links
+
+- [Built-in CSS Support docs](https://nextjs.org/docs/basic-features/built-in-css-support)
+- [Custom webpack config docs](https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config)
diff --git a/errors/install-sass.md b/errors/install-sass.md
@@ -0,0 +1,19 @@
+# Install `sass` to Use Built-In Sass Support
+
+#### Why This Error Occurred
+
+Using Next.js' [built-in Sass support](https://nextjs.org/docs/basic-features/built-in-css-support#sass-support) requires that you bring your own version of Sass.
+
+#### Possible Ways to Fix It
+
+Please install the `sass` package in your project.
+
+```bash
+npm i sass
+# or
+yarn add sass
+```
+
+### Useful Links
+
+- [Sass Support in Documentation](https://nextjs.org/docs/basic-features/built-in-css-support#sass-support)
diff --git a/examples/amp-first/pages/index.js b/examples/amp-first/pages/index.js
@@ -234,10 +234,10 @@ const Home = props => (
 )
 
 // amp-script requires absolute URLs, so we create a property `host` which we can use to calculate the script URL.
-Home.getInitialProps = async ({ req }) => {
+export async function getServerSideProps({ req }) {
   // WARNING: This is a generally unsafe application unless you're deploying to a managed platform like ZEIT Now.
   // Be sure your load balancer is configured to not allow spoofed host headers.
-  return { host: `${getProtocol(req)}://${req.headers.host}` }
+  return { props: { host: `${getProtocol(req)}://${req.headers.host}` } }
 }
 
 function getProtocol(req) {

diff --git a/examples/analyze-bundles/package.json b/examples/analyze-bundles/package.json
@@ -12,8 +12,8 @@
     "cross-env": "^6.0.3",
     "faker": "^4.1.0",
     "next": "latest",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0"
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
   },
   "license": "ISC"
 }
diff --git a/examples/analyze-bundles/pages/index.js b/examples/analyze-bundles/pages/index.js
@@ -1,31 +1,28 @@
 import React from 'react'
 import Link from 'next/link'
+import faker from 'faker'
 
-export default class Index extends React.Component {
-  static getInitialProps({ req }) {
-    if (req) {
-      // Runs only in the server
-      const faker = require('faker')
-      const name = faker.name.findName()
-      return { name }
-    }
-
-    // Runs only in the client
-    return { name: 'Arunoda' }
-  }
-
-  render() {
-    const { name } = this.props
-    return (
+const Index = ({ name }) => {
+  return (
+    <div>
+      <h1>Home Page</h1>
+      <p>Welcome, {name}</p>
       <div>
-        <h1>Home Page</h1>
-        <p>Welcome, {name}</p>
-        <div>
-          <Link href="/about">
-            <a>About Page</a>
-          </Link>
-        </div>
+        <Link href="/about">
+          <a>About Page</a>
+        </Link>
       </div>
-    )
+    </div>
+  )
+}
+
+export default Index
+
+export async function getStaticProps() {
+  // The name will be generated at build time only
+  const name = faker.name.findName()
+
+  return {
+    props: { name },
   }
 }
diff --git a/examples/api-routes/components/Person.js b/examples/api-routes/components/Person.js
@@ -2,7 +2,7 @@ import Link from 'next/link'
 
 export default ({ person }) => (
   <li>
-    <Link href={`/person?id=${person.id}`}>
+    <Link href="/person/[id]" as={`/person/${person.id}`}>
       <a>{person.name}</a>
     </Link>
   </li>

diff --git a/examples/api-routes/package.json b/examples/api-routes/package.json
@@ -7,8 +7,8 @@
     "start": "next start"
   },
   "dependencies": {
-    "isomorphic-unfetch": "3.0.0",
     "next": "latest",
+    "node-fetch": "2.6.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"
   },

diff --git a/examples/api-routes/pages/index.js b/examples/api-routes/pages/index.js
@@ -1,5 +1,5 @@
 import Person from '../components/Person'
-import fetch from 'isomorphic-unfetch'
+import fetch from 'node-fetch'
 
 const Index = ({ people }) => (
   <ul>
@@ -9,11 +9,11 @@ const Index = ({ people }) => (
   </ul>
 )
 
-Index.getInitialProps = async () => {
+export async function getServerSideProps() {
   const response = await fetch('http://localhost:3000/api/people')
   const people = await response.json()
 
-  return { people }
+  return { props: { people } }
 }
 
 export default Index
diff --git a/examples/api-routes/pages/person.js → examples/api-routes/pages/person/[id].js b/examples/api-routes/pages/person.js → examples/api-routes/pages/person/[id].js
@@ -1,4 +1,4 @@
-import fetch from 'isomorphic-unfetch'
+import fetch from 'node-fetch'
 
 const Person = ({ data, status }) =>
   status === 200 ? (
@@ -30,11 +30,16 @@ const Person = ({ data, status }) =>
     <p>{data.message}</p>
   )
 
-Person.getInitialProps = async ({ query }) => {
-  const response = await fetch(`http://localhost:3000/api/people/${query.id}`)
-
+export async function getServerSideProps({ params }) {
+  const response = await fetch(`http://localhost:3000/api/people/${params.id}`)
   const data = await response.json()
-  return { data, status: response.status }
+
+  return {
+    props: {
+      data,
+      status: response.status,
+    },
+  }
 }
 
 export default Person
diff --git a/examples/cms-datocms/README.md b/examples/cms-datocms/README.md
@@ -2,6 +2,10 @@
 
 This example showcases Next.js's [Static Generation](/docs/basic-features/pages.md) feature using [DatoCMS](https://www.datocms.com/) as the data source.
 
+## Demo
+
+### [https://next-blog-datocms.now.sh/](https://next-blog-datocms.now.sh/)
+
 ## How to use
 
 ### Using `create-next-app`

diff --git a/examples/cms-datocms/package.json b/examples/cms-datocms/package.json
@@ -10,7 +10,7 @@
     "classnames": "2.2.6",
     "date-fns": "2.10.0",
     "isomorphic-unfetch": "3.0.0",
-    "next": "9.2.3-canary.26",
+    "next": "9.3.0",
     "react": "^16.13.0",
     "react-datocms": "1.1.0",
     "react-dom": "^16.13.0",

diff --git a/examples/cms-datocms/pages/index.js b/examples/cms-datocms/pages/index.js
@@ -36,7 +36,7 @@ export default function Index({ allPosts }) {
 }
 
 export async function getStaticProps({ preview }) {
-  const allPosts = await getAllPostsForHome(preview)
+  const allPosts = (await getAllPostsForHome(preview)) || []
   return {
     props: { allPosts },
   }

diff --git a/examples/cms-datocms/pages/posts/[slug].js b/examples/cms-datocms/pages/posts/[slug].js
@@ -50,7 +50,7 @@ export default function Post({ post, morePosts, preview }) {
   )
 }
 
-export async function getStaticProps({ params, preview }) {
+export async function getStaticProps({ params, preview = null }) {
   const data = await getPostAndMorePosts(params.slug, preview)
   const content = await markdownToHtml(data?.post?.content || '')
 

diff --git a/examples/cms-datocms/public/images/author.jpg b/examples/cms-datocms/public/images/author.jpg
diff --git a/examples/cms-datocms/public/images/image.jpg b/examples/cms-datocms/public/images/image.jpg
diff --git a/examples/custom-server-express/package.json b/examples/custom-server-express/package.json
@@ -10,7 +10,7 @@
     "cross-env": "^5.2.0",
     "express": "^4.14.0",
     "next": "latest",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0"
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0"
   }
 }
diff --git a/examples/custom-server-express/pages/index.js b/examples/custom-server-express/pages/index.js
@@ -13,10 +13,5 @@ export default () => (
         <a>b</a>
       </Link>
     </li>
-    <li>
-      <Link href={{ pathname: '/posts', query: { id: '2' } }} as="/posts/2">
-        <a>post #2</a>
-      </Link>
-    </li>
   </ul>
 )
diff --git a/examples/custom-server-express/pages/posts.js b/examples/custom-server-express/pages/posts.js
diff --git a/examples/custom-server-express/server.js b/examples/custom-server-express/server.js
@@ -17,10 +17,6 @@ app.prepare().then(() => {
     return app.render(req, res, '/b', req.query)
   })
 
-  server.get('/posts/:id', (req, res) => {
-    return app.render(req, res, '/posts', { id: req.params.id })
-  })
-
   server.all('*', (req, res) => {
     return handle(req, res)
   })

diff --git a/examples/custom-server-fastify/package.json b/examples/custom-server-fastify/package.json
@@ -7,10 +7,10 @@
     "start": "cross-env NODE_ENV=production node ./server.js"
   },
   "dependencies": {
-    "cross-env": "^5.2.0",
-    "fastify": "2.1.0",
+    "cross-env": "^7.0.2",
+    "fastify": "^2.12.1",
     "next": "latest",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0"
   }
 }
diff --git a/examples/custom-server-fastify/server.js b/examples/custom-server-fastify/server.js
@@ -6,6 +6,7 @@ const dev = process.env.NODE_ENV !== 'production'
 
 fastify.register((fastify, opts, next) => {
   const app = Next({ dev })
+  const handle = app.getRequestHandler()
   app
     .prepare()
     .then(() => {
@@ -30,7 +31,7 @@ fastify.register((fastify, opts, next) => {
       })
 
       fastify.all('/*', (req, reply) => {
-        return app.handleRequest(req.req, reply.res).then(() => {
+        return handle(req.req, reply.res).then(() => {
           reply.sent = true
         })
       })

diff --git a/examples/data-fetch/README.md b/examples/data-fetch/README.md
@@ -3,7 +3,7 @@
 Next.js was conceived to make it easy to create universal apps. That's why fetching data
 on the server and the client when necessary is so easy with Next.
 
-Using `getInitialProps` fetches data on the server for SSR and then on the client when the component is re-mounted (not on the first paint).
+Using `getStaticProps` fetches data at built time from a page, Next.js will pre-render this page at build time.
 
 ## Deploy your own