Merge branch 'canary' into add/data-routes

vercel · Feb 21, 2020 · 1115b1d · 1115b1d
2 parents dbbfab3 + 830090a
commit 1115b1d
Show file tree

Hide file tree

Showing 11 changed files with 114 additions and 59 deletions.
diff --git a/errors/invalid-getstaticprops-value.md b/errors/invalid-getstaticprops-value.md
@@ -0,0 +1,17 @@
+# Invalid unstable_getStaticProps Return Value
+
+#### Why This Error Occurred
+
+In one of the page's `unstable_getStaticProps` the return value had the incorrect shape.
+
+#### Possible Ways to Fix It
+
+Make sure to return the following shape from `unstable_getStaticProps`:
+
+```js
+export async function unstable_getStaticProps() {
+  return {
+    props: { [key: string]: any }
+  }
+}
+```
diff --git a/examples/with-chakra-ui/src/components/CTA.js b/examples/with-chakra-ui/src/components/CTA.js
@@ -1,4 +1,3 @@
-import Link from 'next/link'
 import { Link as ChakraLink, Button } from '@chakra-ui/core'
 
 import { Container } from './Container'
@@ -12,27 +11,21 @@ export const CTA = () => (
     maxWidth="48rem"
     py={2}
   >
-    <Link isExternal href="https://chakra-ui.com">
-      <ChakraLink isExternal href="https://chakra-ui.com" flexGrow={1} mx={2}>
-        <Button width="100%" variant="outline" variantColor="green">
-          chakra-ui
-        </Button>
-      </ChakraLink>
-    </Link>
-    <Link
+    <ChakraLink isExternal href="https://chakra-ui.com" flexGrow={1} mx={2}>
+      <Button width="100%" variant="outline" variantColor="green">
+        chakra-ui
+      </Button>
+    </ChakraLink>
+
+    <ChakraLink
       isExternal
       href="https://github.com/zeit/next.js/blob/canary/examples/with-chakra-ui"
+      flexGrow={3}
+      mx={2}
     >
-      <ChakraLink
-        isExternal
-        href="https://github.com/zeit/next.js/blob/canary/examples/with-chakra-ui"
-        flexGrow={3}
-        mx={2}
-      >
-        <Button width="100%" variant="solid" variantColor="green">
-          View Repo
-        </Button>
-      </ChakraLink>
-    </Link>
+      <Button width="100%" variant="solid" variantColor="green">
+        View Repo
+      </Button>
+    </ChakraLink>
   </Container>
 )
diff --git a/examples/with-chakra-ui/src/pages/index.js b/examples/with-chakra-ui/src/pages/index.js
@@ -1,5 +1,4 @@
 import React from 'react'
-import Link from 'next/link'
 import { withTheme } from 'emotion-theming'
 import {
   Link as ChakraLink,
@@ -29,29 +28,20 @@ const Index = () => (
       <List spacing={3} my={0}>
         <ListItem>
           <ListIcon icon="check-circle" color="green.500" />
-          <Link href="https://chakra-ui.com">
-            <ChakraLink
-              isExternal
-              href="https://chakra-ui.com"
-              flexGrow={1}
-              mr={2}
-            >
-              Chakra UI <Icon name="external-link" mx="2px" />
-            </ChakraLink>
-          </Link>
+          <ChakraLink
+            isExternal
+            href="https://chakra-ui.com"
+            flexGrow={1}
+            mr={2}
+          >
+            Chakra UI <Icon name="external-link" mx="2px" />
+          </ChakraLink>
         </ListItem>
         <ListItem>
           <ListIcon icon="check-circle" color="green.500" />
-          <Link href="https://nextjs.org">
-            <ChakraLink
-              isExternal
-              href="https://nextjs.org"
-              flexGrow={1}
-              mr={2}
-            >
-              Next.js <Icon name="external-link" mx="2px" />
-            </ChakraLink>
-          </Link>
+          <ChakraLink isExternal href="https://nextjs.org" flexGrow={1} mr={2}>
+            Next.js <Icon name="external-link" mx="2px" />
+          </ChakraLink>
         </ListItem>
       </List>
     </Main>

diff --git a/packages/next/build/utils.ts b/packages/next/build/utils.ts
@@ -543,10 +543,19 @@ export async function isPageStatic(
       throw new Error(SERVER_PROPS_SSG_CONFLICT)
     }
 
+    const pageIsDynamic = isDynamicRoute(page)
     // A page cannot have static parameters if it is not a dynamic page.
-    if (hasStaticProps && hasStaticPaths && !isDynamicRoute(page)) {
+    if (hasStaticProps && hasStaticPaths && !pageIsDynamic) {
       throw new Error(
-        `unstable_getStaticPaths can only be used with dynamic pages. https://nextjs.org/docs#dynamic-routing`
+        `unstable_getStaticPaths can only be used with dynamic pages, not '${page}'.` +
+          `\nLearn more: https://nextjs.org/docs#dynamic-routing`
+      )
+    }
+
+    if (hasStaticProps && pageIsDynamic && !hasStaticPaths) {
+      throw new Error(
+        `unstable_getStaticPaths is required for dynamic SSG pages and is missing for '${page}'.` +
+          `\nRead more: https://err.sh/next.js/invalid-getstaticpaths-value`
       )
     }
 

diff --git a/packages/next/cli/next-build.ts b/packages/next/cli/next-build.ts
@@ -45,7 +45,7 @@ const nextBuild: cliCommand = argv => {
   build(dir)
     .then(() => process.exit(0))
     .catch(err => {
-      // tslint:disable-next-line
+      console.error('')
       console.error('> Build error occurred')
       printAndExit(err)
     })

diff --git a/packages/next/export/worker.js b/packages/next/export/worker.js
@@ -264,8 +264,8 @@ export default async function({
     return results
   } catch (error) {
     console.error(
-      `\nError occurred prerendering page "${path}" https://err.sh/zeit/next.js/prerender-error:`,
-      error
+      `\nError occurred prerendering page "${path}" https://err.sh/next.js/prerender-error:\n` +
+        error
     )
     return { ...results, error: true }
   }

diff --git a/packages/next/next-server/server/render.tsx b/packages/next/next-server/server/render.tsx
@@ -246,7 +246,8 @@ const invalidKeysMsg = (methodName: string, invalidKeys: string[]) => {
   return (
     `Additional keys were returned from \`${methodName}\`. Properties intended for your component must be nested under the \`props\` key, e.g.:` +
     `\n\n\treturn { props: { title: 'My Title', content: '...' } }` +
-    `\n\nKeys that need to be moved: ${invalidKeys.join(', ')}.`
+    `\n\nKeys that need to be moved: ${invalidKeys.join(', ')}.` +
+    `\nRead more: https://err.sh/next.js/invalid-getstaticprops-value`
   )
 }
 
@@ -316,6 +317,8 @@ export async function renderToHTML(
 
   const hasPageGetInitialProps = !!(Component as any).getInitialProps
 
+  const pageIsDynamic = isDynamicRoute(pathname)
+
   const isAutoExport =
     !hasPageGetInitialProps &&
     defaultAppGetInitialProps &&
@@ -325,7 +328,7 @@ export async function renderToHTML(
   if (
     process.env.NODE_ENV !== 'production' &&
     (isAutoExport || isFallback) &&
-    isDynamicRoute(pathname) &&
+    pageIsDynamic &&
     didRewrite
   ) {
     // TODO: add err.sh when rewrites go stable
@@ -360,6 +363,13 @@ export async function renderToHTML(
     )
   }
 
+  if (isSpr && pageIsDynamic && !unstable_getStaticPaths) {
+    throw new Error(
+      `unstable_getStaticPaths is required for dynamic SSG pages and is missing for '${pathname}'.` +
+        `\nRead more: https://err.sh/next.js/invalid-getstaticpaths-value`
+    )
+  }
+
   if (dev) {
     const { isValidElementType } = require('react-is')
     if (!isValidElementType(Component)) {
@@ -458,7 +468,7 @@ export async function renderToHTML(
       // invoke, where we'd have to consider server & serverless.
       const previewData = tryGetPreviewData(req, res, previewProps)
       const data = await unstable_getStaticProps!({
-        ...(isDynamicRoute(pathname)
+        ...(pageIsDynamic
           ? {
               params: query as ParsedUrlQuery,
             }

diff --git a/test/integration/dynamic-routing/pages/p1/p2/all-ssg/[...rest].js b/test/integration/dynamic-routing/pages/p1/p2/all-ssg/[...rest].js
@@ -6,4 +6,10 @@ export function unstable_getStaticProps({ params }) {
   return { props: { params } }
 }
 
+export function unstable_getStaticPaths() {
+  return {
+    paths: [],
+  }
+}
+
 export default All
diff --git a/test/integration/dynamic-routing/pages/p1/p2/nested-all-ssg/[...rest]/index.js b/test/integration/dynamic-routing/pages/p1/p2/nested-all-ssg/[...rest]/index.js
@@ -12,4 +12,10 @@ export function unstable_getStaticProps({ params }) {
   return { props: { params } }
 }
 
+export function unstable_getStaticPaths() {
+  return {
+    paths: [],
+  }
+}
+
 export default All
diff --git a/test/integration/error-load-fail/test/index.test.js b/test/integration/error-load-fail/test/index.test.js
@@ -2,13 +2,7 @@
 /* global jasmine */
 import path from 'path'
 import webdriver from 'next-webdriver'
-import {
-  nextBuild,
-  nextStart,
-  findPort,
-  killApp,
-  waitFor,
-} from 'next-test-utils'
+import { nextBuild, nextStart, findPort, killApp, check } from 'next-test-utils'
 
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60 * 1
 const appDir = path.join(__dirname, '..')
@@ -29,8 +23,11 @@ describe('Failing to load _error', () => {
     await killApp(app)
 
     await browser.elementByCss('#to-broken').click()
-    await waitFor(2000)
 
-    expect(await browser.eval('window.beforeNavigate')).toBeFalsy()
+    await check(async () => {
+      return !(await browser.eval('window.beforeNavigate'))
+        ? 'reloaded'
+        : 'fail'
+    }, /reloaded/)
   })
 })
diff --git a/test/integration/prerender/test/index.test.js b/test/integration/prerender/test/index.test.js
@@ -1,7 +1,7 @@
 /* eslint-env jest */
 /* global jasmine */
 import fs from 'fs-extra'
-import { join } from 'path'
+import { join, dirname } from 'path'
 import cheerio from 'cheerio'
 import webdriver from 'next-webdriver'
 import escapeRegex from 'escape-string-regexp'
@@ -448,6 +448,33 @@ const runTests = (dev = false) => {
       }
     })
 
+    it('should error on dynamic page without getStaticPaths', async () => {
+      const curPage = join(__dirname, '../pages/temp/[slug].js')
+      await fs.mkdirp(dirname(curPage))
+      await fs.writeFile(
+        curPage,
+        `
+          export async function unstable_getStaticProps() {
+            return {
+              props: {
+                hello: 'world'
+              }
+            }
+          }
+          export default () => 'oops'
+        `
+      )
+      await waitFor(1000)
+      try {
+        const html = await renderViaHTTP(appPort, '/temp/hello')
+        expect(html).toMatch(
+          /unstable_getStaticPaths is required for dynamic SSG pages and is missing for/
+        )
+      } finally {
+        await fs.remove(curPage)
+      }
+    })
+
     it('should not re-call getStaticProps when updating query', async () => {
       const browser = await webdriver(appPort, '/something?hello=world')
       await waitFor(2000)