Add paths field for unstable_getStaticPaths (#10454)

* Add paths field for unstable_getStaticPaths

* Make sure to specify page in getStaticPaths errors

packages/next/build/utils.ts

@@ -15,6 +15,7 @@ import { recursiveReadDir } from '../lib/recursive-readdir'
 import { getRouteMatcher, getRouteRegex } from '../next-server/lib/router/utils'
 import { isDynamicRoute } from '../next-server/lib/router/utils/is-dynamic'
 import { findPageFile } from '../server/lib/find-page-file'
+import { Unstable_getStaticPaths } from '../next-server/server/load-components'
 
 const fileGzipStats: { [k: string]: Promise<number> } = {}
 const fsStatGzip = (file: string) => {
@@ -559,9 +560,35 @@ export async function isPageStatic(
       // Get the default list of allowed params.
       const _validParamKeys = Object.keys(_routeMatcher(page))
 
-      const toPrerender: Array<
-        { params?: { [key: string]: string } } | string
-      > = await mod.unstable_getStaticPaths()
+      const staticPathsResult = await (mod.unstable_getStaticPaths as Unstable_getStaticPaths)()
+
+      if (!staticPathsResult || typeof staticPathsResult !== 'object') {
+        throw new Error(
+          `Invalid value returned from unstable_getStaticPaths in ${page}. Received ${typeof staticPathsResult} Expected: { paths: [] }`
+        )
+      }
+
+      const invalidStaticPathKeys = Object.keys(staticPathsResult).filter(
+        key => key !== 'paths'
+      )
+
+      if (invalidStaticPathKeys.length > 0) {
+        throw new Error(
+          `Extra keys returned from unstable_getStaticPaths in ${page} (${invalidStaticPathKeys.join(
+            ', '
+          )}) The only field allowed currently is \`paths\``
+        )
+      }
+
+      const toPrerender = staticPathsResult.paths
+
+      if (!Array.isArray(toPrerender)) {
+        throw new Error(
+          `Invalid \`paths\` value returned from unstable_getStaticProps in ${page}.\n` +
+            `\`paths\` must be an array of strings or objects of shape { params: [key: string]: string }`
+        )
+      }
+
       toPrerender.forEach(entry => {
         // For a string-provided path, we must make sure it matches the dynamic
         // route.
@@ -594,9 +621,7 @@ export async function isPageStatic(
           let builtPage = page
           _validParamKeys.forEach(validParamKey => {
             const { repeat } = _routeRegex.groups[validParamKey]
-            const paramValue: string | string[] = params[validParamKey] as
-              | string
-              | string[]
+            const paramValue = params[validParamKey]
             if (
               (repeat && !Array.isArray(paramValue)) ||
               (!repeat && typeof paramValue !== 'string')

packages/next/next-server/server/load-components.ts

@@ -32,7 +32,9 @@ type Unstable_getStaticProps = (params: {
   revalidate?: number | boolean
 }>
 
-type Unstable_getStaticPaths = () => Promise<Array<string | ParsedUrlQuery>>
+export type Unstable_getStaticPaths = () => Promise<{
+  paths: Array<string | { params: ParsedUrlQuery }>
+}>
 
 type Unstable_getServerProps = (context: {
   params: ParsedUrlQuery | undefined

test/integration/catches-missing-getStaticProps/pages/[slug].js

@@ -1,5 +1,5 @@
 export async function unstable_getStaticPaths() {
-  return ['/hello', '/world']
+  return { paths: ['/hello', '/world'] }
 }
 
 export default () => <p>something is missing 🤔</p>

test/integration/dynamic-routing/pages/p1/p2/predefined-ssg/[...rest].js

@@ -7,10 +7,12 @@ export function unstable_getStaticProps({ params }) {
 }
 
 export function unstable_getStaticPaths() {
-  return [
-    `/p1/p2/predefined-ssg/one-level`,
-    `/p1/p2/predefined-ssg/1st-level/2nd-level`,
-  ]
+  return {
+    paths: [
+      `/p1/p2/predefined-ssg/one-level`,
+      `/p1/p2/predefined-ssg/1st-level/2nd-level`,
+    ],
+  }
 }
 
 export default All

test/integration/prerender-invalid-catchall-params/pages/[...slug].js

@@ -2,7 +2,7 @@ import React from 'react'
 
 // eslint-disable-next-line camelcase
 export async function unstable_getStaticPaths() {
-  return [{ params: { slug: 'hello' } }]
+  return { paths: [{ params: { slug: 'hello' } }] }
 }
 
 // eslint-disable-next-line camelcase

test/integration/prerender-invalid-paths/pages/[foo]/[post].js

@@ -2,7 +2,7 @@ import React from 'react'
 
 // eslint-disable-next-line camelcase
 export async function unstable_getStaticPaths() {
-  return [{ foo: 'bad', baz: 'herro' }]
+  return { paths: [{ foo: 'bad', baz: 'herro' }] }
 }
 
 // eslint-disable-next-line camelcase

test/integration/prerender/pages/blog/[post]/[comment].js

@@ -3,10 +3,12 @@ import Link from 'next/link'
 
 // eslint-disable-next-line camelcase
 export async function unstable_getStaticPaths() {
-  return [
-    '/blog/post-1/comment-1',
-    { params: { post: 'post-2', comment: 'comment-2' } },
-  ]
+  return {
+    paths: [
+      '/blog/post-1/comment-1',
+      { params: { post: 'post-2', comment: 'comment-2' } },
+    ],
+  }
 }
 
 // eslint-disable-next-line camelcase

test/integration/prerender/pages/blog/[post]/index.js

@@ -4,14 +4,16 @@ import { useRouter } from 'next/router'
 
 // eslint-disable-next-line camelcase
 export async function unstable_getStaticPaths() {
-  return [
-    '/blog/post-1',
-    { params: { post: 'post-2' } },
-    '/blog/[post3]',
-    '/blog/post-4',
-    '/blog/post.1',
-    '/blog/post.1', // handle duplicates
-  ]
+  return {
+    paths: [
+      '/blog/post-1',
+      { params: { post: 'post-2' } },
+      '/blog/[post3]',
+      '/blog/post-4',
+      '/blog/post.1',
+      '/blog/post.1', // handle duplicates
+    ],
+  }
 }
 
 // eslint-disable-next-line camelcase

test/integration/prerender/pages/catchall/[...slug].js

@@ -8,12 +8,14 @@ export async function unstable_getStaticProps({ params: { slug } }) {
 }
 
 export async function unstable_getStaticPaths() {
-  return [
-    { params: { slug: ['first'] } },
-    '/catchall/second',
-    { params: { slug: ['another', 'value'] } },
-    '/catchall/hello/another',
-  ]
+  return {
+    paths: [
+      { params: { slug: ['first'] } },
+      '/catchall/second',
+      { params: { slug: ['another', 'value'] } },
+      '/catchall/hello/another',
+    ],
+  }
 }
 
 export default ({ slug }) => <p id="catchall">Hi {slug?.join('/')}</p>

test/integration/prerender/pages/user/[user]/profile.js

@@ -3,7 +3,7 @@ import Link from 'next/link'
 
 // eslint-disable-next-line camelcase
 export async function unstable_getStaticPaths() {
-  return []
+  return { paths: [] }
 }
 
 // eslint-disable-next-line camelcase