first commit

test/integration/prerender/pages/another/index.js

@@ -0,0 +1,30 @@
+import Link from 'next/link'
+import fs from 'fs'
+import path from 'path'
+
+export async function getStaticProps() {
+  const text = fs
+    .readFileSync(path.join(process.cwd(), 'world.txt'), 'utf8')
+    .trim()
+  return {
+    props: {
+      world: text,
+      time: new Date().getTime(),
+    },
+    revalidate: true,
+  }
+}
+
+export default ({ world, time }) => (
+  <>
+    <p>hello {world}</p>
+    <span id="anotherTime">time: {time}</span>
+    <Link href="/" id="home">
+      to home
+    </Link>
+    <br />
+    <Link href="/something" id="something">
+      to something
+    </Link>
+  </>
+)

test/integration/prerender/pages/api-docs/[...slug].js

@@ -0,0 +1,27 @@
+import { useRouter } from 'next/router'
+
+export const getStaticProps = () => {
+  return {
+    props: {
+      hello: 'world',
+    },
+  }
+}
+
+export const getStaticPaths = () => {
+  return {
+    paths: ['/api-docs/first'],
+    fallback: true,
+  }
+}
+
+export default function Slug(props) {
+  if (useRouter().isFallback) return 'Loading...'
+
+  return (
+    <>
+      <p id="api-docs">API Docs</p>
+      <p id="props">{JSON.stringify(props)}</p>
+    </>
+  )
+}

test/integration/prerender/pages/api/bad.js

@@ -0,0 +1,3 @@
+export default function handler(req, res) {
+  throw new Error('lol')
+}

test/integration/prerender/pages/bad-gssp.js

@@ -0,0 +1,7 @@
+export function getServerSideProps() {
+  throw new Error('lol')
+}
+
+export default function BadGssp() {
+  return <div />
+}

test/integration/prerender/pages/bad-ssr.js

@@ -0,0 +1,7 @@
+export function getServerSideProps() {
+  return { props: {} }
+}
+
+export default function BadSsr() {
+  throw new Error('oops')
+}

test/integration/prerender/pages/blocking-fallback-once/[slug].js

@@ -0,0 +1,43 @@
+import React from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+export async function getStaticPaths() {
+  return {
+    paths: [],
+    fallback: 'blocking',
+  }
+}
+
+export async function getStaticProps({ params }) {
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+
+  return {
+    props: {
+      params,
+      hello: 'world',
+      post: params.slug,
+      random: Math.random(),
+      time: (await import('perf_hooks')).performance.now(),
+    },
+    revalidate: false,
+  }
+}
+
+export default ({ post, time, params }) => {
+  if (useRouter().isFallback) {
+    return <p>hi fallback</p>
+  }
+
+  return (
+    <>
+      <p>Post: {post}</p>
+      <span>time: {time}</span>
+      <div id="params">{JSON.stringify(params)}</div>
+      <div id="query">{JSON.stringify(useRouter().query)}</div>
+      <Link href="/" id="home">
+        to home
+      </Link>
+    </>
+  )
+}

test/integration/prerender/pages/blocking-fallback-some/[slug].js

@@ -0,0 +1,43 @@
+import React from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+export async function getStaticPaths() {
+  return {
+    paths: [{ params: { slug: 'a' } }, { params: { slug: 'b' } }],
+    fallback: 'blocking',
+  }
+}
+
+export async function getStaticProps({ params }) {
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+
+  return {
+    props: {
+      params,
+      hello: 'world',
+      post: params.slug,
+      random: Math.random(),
+      time: (await import('perf_hooks')).performance.now(),
+    },
+    revalidate: 1,
+  }
+}
+
+export default ({ post, time, params }) => {
+  if (useRouter().isFallback) {
+    return <p>hi fallback</p>
+  }
+
+  return (
+    <>
+      <p>Post: {post}</p>
+      <span>time: {time}</span>
+      <div id="params">{JSON.stringify(params)}</div>
+      <div id="query">{JSON.stringify(useRouter().query)}</div>
+      <Link href="/" id="home">
+        to home
+      </Link>
+    </>
+  )
+}

test/integration/prerender/pages/blocking-fallback/[slug].js

@@ -0,0 +1,43 @@
+import React from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+export async function getStaticPaths() {
+  return {
+    paths: [],
+    fallback: 'blocking',
+  }
+}
+
+export async function getStaticProps({ params }) {
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+
+  return {
+    props: {
+      params,
+      hello: 'world',
+      post: params.slug,
+      random: Math.random(),
+      time: (await import('perf_hooks')).performance.now(),
+    },
+    revalidate: 1,
+  }
+}
+
+export default ({ post, time, params }) => {
+  if (useRouter().isFallback) {
+    return <p>hi fallback</p>
+  }
+
+  return (
+    <>
+      <p>Post: {post}</p>
+      <span>time: {time}</span>
+      <div id="params">{JSON.stringify(params)}</div>
+      <div id="query">{JSON.stringify(useRouter().query)}</div>
+      <Link href="/" id="home">
+        to home
+      </Link>
+    </>
+  )
+}

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

@@ -0,0 +1,41 @@
+import React from 'react'
+import Link from 'next/link'
+
+export async function getStaticPaths() {
+  return {
+    paths: [
+      '/blog/post-1/comment-1',
+      { params: { post: 'post-2', comment: 'comment-2' } },
+    ],
+    fallback: true,
+  }
+}
+
+export async function getStaticProps({ params }) {
+  return {
+    props: {
+      post: params.post,
+      comment: params.comment,
+      time: new Date().getTime(),
+    },
+    revalidate: 2,
+  }
+}
+
+export default ({ post, comment, time }) => {
+  // we're in a loading state
+  if (!post) {
+    return <p>loading...</p>
+  }
+
+  return (
+    <>
+      <p>Post: {post}</p>
+      <p>Comment: {comment}</p>
+      <span>time: {time}</span>
+      <Link href="/" id="home">
+        to home
+      </Link>
+    </>
+  )
+}

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

@@ -0,0 +1,61 @@
+import React from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import 'firebase/firestore'
+
+export async function getStaticPaths() {
+  return {
+    paths: [
+      '/blog/post-1',
+      { params: { post: 'post-2' } },
+      '/blog/[post3]',
+      '/blog/post-4',
+      '/blog/post.1',
+      '/blog/post.1', // handle duplicates
+    ],
+    fallback: true,
+  }
+}
+
+let counter = 0
+
+export async function getStaticProps({ params }) {
+  if (params.post === 'post-10') {
+    await new Promise((resolve) => {
+      setTimeout(() => resolve(), 1000)
+    })
+  }
+
+  if (params.post === 'post-100') {
+    throw new Error('such broken..')
+  }
+
+  if (params.post === 'post-999') {
+    if (++counter < 6) {
+      throw new Error('try again..')
+    }
+  }
+
+  return {
+    props: {
+      params,
+      post: params.post,
+      time: (await import('perf_hooks')).performance.now(),
+    },
+    revalidate: 10,
+  }
+}
+
+export default ({ post, time, params }) => {
+  return (
+    <>
+      <p>Post: {post}</p>
+      <span>time: {time}</span>
+      <div id="params">{JSON.stringify(params)}</div>
+      <div id="query">{JSON.stringify(useRouter().query)}</div>
+      <Link href="/" id="home">
+        to home
+      </Link>
+    </>
+  )
+}

test/integration/prerender/pages/blog/index.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import Link from 'next/link'
+
+export async function getStaticProps() {
+  return {
+    props: {
+      slugs: ['post-1', 'post-2'],
+      time: (await import('perf_hooks')).performance.now(),
+    },
+    revalidate: 10,
+  }
+}
+
+export default ({ slugs, time }) => {
+  return (
+    <>
+      <p>Posts: {JSON.stringify(slugs)}</p>
+      <span>time: {time}</span>
+      <Link href="/" id="home">
+        to home
+      </Link>
+    </>
+  )
+}

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

@@ -0,0 +1,41 @@
+import Link from 'next/link'
+
+export async function getStaticProps({ params: { slug } }) {
+  if (slug[0] === 'delayby3s') {
+    await new Promise((resolve) => setTimeout(resolve, 3000))
+  }
+
+  return {
+    props: {
+      slug,
+    },
+    revalidate: 1,
+  }
+}
+
+export async function getStaticPaths() {
+  return {
+    paths: [
+      { params: { slug: ['first'] } },
+      '/catchall-explicit/second',
+      { params: { slug: ['another', 'value'] } },
+      '/catchall-explicit/hello/another',
+      '/catchall-explicit/[first]/[second]',
+      { params: { slug: ['[third]', '[fourth]'] } },
+    ],
+    fallback: false,
+  }
+}
+
+export default function Page({ slug }) {
+  // Important to not check for `slug` existence (testing that build does not
+  // render fallback version and error)
+  return (
+    <>
+      <p id="catchall">Hi {slug.join(' ')}</p>{' '}
+      <Link href="/" id="home">
+        to home
+      </Link>
+    </>
+  )
+}

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

@@ -0,0 +1,29 @@
+import Link from 'next/link'
+
+export async function getStaticProps({ params: { slug } }) {
+  return {
+    props: {
+      slug: slug || [],
+    },
+  }
+}
+
+export async function getStaticPaths() {
+  return {
+    paths: [{ params: { slug: [] } }, { params: { slug: ['value'] } }],
+    fallback: false,
+  }
+}
+
+export default ({ slug }) => {
+  // Important to not check for `slug` existence (testing that build does not
+  // render fallback version and error)
+  return (
+    <>
+      <p id="catchall">Catch all: [{slug.join(', ')}]</p>
+      <Link href="/" id="home">
+        to home
+      </Link>
+    </>
+  )
+}

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

@@ -0,0 +1,34 @@
+import { useRouter } from 'next/router'
+
+export async function getStaticProps({ params: { slug } }) {
+  if (slug[0] === 'delayby3s') {
+    await new Promise((resolve) => setTimeout(resolve, 3000))
+  }
+
+  return {
+    props: {
+      slug,
+    },
+    revalidate: 1,
+  }
+}
+
+export async function getStaticPaths() {
+  return {
+    paths: [
+      { params: { slug: ['first'] } },
+      '/catchall/second',
+      { params: { slug: ['another', 'value'] } },
+      '/catchall/hello/another',
+    ],
+    fallback: true,
+  }
+}
+
+export default ({ slug }) => {
+  const { isFallback } = useRouter()
+  if (isFallback) {
+    return <p id="catchall">fallback</p>
+  }
+  return <p id="catchall">Hi {slug.join(' ')}</p>
+}

test/integration/prerender/pages/default-revalidate.js

@@ -0,0 +1,24 @@
+import Link from 'next/link'
+
+export async function getStaticProps() {
+  return {
+    props: {
+      world: 'world',
+      time: new Date().getTime(),
+    },
+  }
+}
+
+export default ({ world, time }) => (
+  <>
+    <p>hello {world}</p>
+    <span>time: {time}</span>
+    <Link href="/" id="home">
+      to home
+    </Link>
+    <br />
+    <Link href="/something" id="something">
+      to something
+    </Link>
+  </>
+)

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

@@ -0,0 +1,27 @@
+import Link from 'next/link'
+
+export async function getStaticProps({ params: { slug } }) {
+  return {
+    props: { slug },
+  }
+}
+
+export async function getStaticPaths() {
+  return {
+    paths: [{ params: { slug: '[first]' } }, '/dynamic/[second]'],
+    fallback: false,
+  }
+}
+
+export default ({ slug }) => {
+  // Important to not check for `slug` existence (testing that build does not
+  // render fallback version and error)
+  return (
+    <>
+      <p id="param">Hi {slug}!</p>{' '}
+      <Link href="/" id="home">
+        to home
+      </Link>
+    </>
+  )
+}

test/integration/prerender/pages/fallback-only/[slug].js

@@ -0,0 +1,43 @@
+import React from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+export async function getStaticPaths() {
+  return {
+    paths: [],
+    fallback: true,
+  }
+}
+
+export async function getStaticProps({ params }) {
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+
+  return {
+    props: {
+      params,
+      hello: 'world',
+      post: params.slug,
+      random: Math.random(),
+      time: (await import('perf_hooks')).performance.now(),
+    },
+    revalidate: 1,
+  }
+}
+
+export default ({ post, time, params }) => {
+  if (useRouter().isFallback) {
+    return <p>hi fallback</p>
+  }
+
+  return (
+    <>
+      <p>Post: {post}</p>
+      <span>time: {time}</span>
+      <div id="params">{JSON.stringify(params)}</div>
+      <div id="query">{JSON.stringify(useRouter().query)}</div>
+      <Link href="/" id="home">
+        to home
+      </Link>
+    </>
+  )
+}

test/integration/prerender/pages/index.js

@@ -0,0 +1,108 @@
+import Link from 'next/link'
+
+export async function getStaticProps() {
+  // throw new Error('oops from getStaticProps')
+  return {
+    props: { world: 'world', time: new Date().getTime() },
+    // bad-prop
+    revalidate: 2,
+  }
+}
+
+const Page = ({ world, time }) => {
+  return (
+    <>
+      {/* <div id='after-change'>idk</div> */}
+      <p>hello {world}</p>
+      <span>time: {time}</span>
+      <Link href="/non-json/[p]" as="/non-json/1" id="non-json">
+        to non-json
+      </Link>
+      <br />
+      <Link href="/another?hello=world" as="/another/?hello=world" id="another">
+        to another
+      </Link>
+      <br />
+      <Link href="/something" id="something">
+        to something
+      </Link>
+      <br />
+      <Link href="/normal" id="normal">
+        to normal
+      </Link>
+      <br />
+      <Link href="/blog/[post]" as="/blog/post-1" id="post-1">
+        to dynamic
+      </Link>
+      <Link href="/blog/[post]" as="/blog/post-100" id="broken-post">
+        to broken
+      </Link>
+      <Link
+        href="/blog/[post]"
+        as="/blog/post-999"
+        prefetch={false}
+        id="broken-at-first-post"
+      >
+        to broken at first
+      </Link>
+      <br />
+      <Link
+        href="/blog/[post]/[comment]"
+        as="/blog/post-1/comment-1"
+        id="comment-1"
+      >
+        to another dynamic
+      </Link>
+      <Link href="/catchall/[...slug]" as="/catchall/first" id="to-catchall">
+        to catchall
+      </Link>
+      <br />
+      <Link href="/index" id="to-nested-index">
+        to nested index
+      </Link>
+      <br />
+      <Link href="/lang/[lang]/about?lang=en" as="/about" id="to-rewritten-ssg">
+        to rewritten static path page
+      </Link>
+      <br />
+      <Link
+        href="/catchall-optional/[[...slug]]"
+        as="/catchall-optional"
+        id="catchall-optional-root"
+      >
+        to optional catchall root
+      </Link>
+      <Link
+        href="/catchall-optional/[[...slug]]"
+        as="/catchall-optional/value"
+        id="catchall-optional-value"
+      >
+        to optional catchall page /value
+      </Link>
+      <br />
+      <Link href="/dynamic/[slug]" as="/dynamic/[first]" id="dynamic-first">
+        to dynamic [first] page
+      </Link>
+      <Link href="/dynamic/[slug]" as="/dynamic/[second]" id="dynamic-second">
+        to dynamic [second] page
+      </Link>
+      <br />
+      <Link
+        href="/catchall-explicit/[...slug]"
+        as="/catchall-explicit/[first]/[second]"
+        id="catchall-explicit-string"
+      >
+        to catchall-explicit [first]/[second] page
+      </Link>
+      <Link
+        href="/catchall-explicit/[...slug]"
+        as="/catchall-explicit/[third]/[fourth]"
+        id="catchall-explicit-object"
+      >
+        to catchall-explicit [third]/[fourth] page
+      </Link>
+    </>
+  )
+}
+
+export default Page

test/integration/prerender/pages/index/index.js

@@ -0,0 +1,18 @@
+import Link from 'next/link'
+
+export async function getStaticProps() {
+  return {
+    props: { world: 'nested index' },
+  }
+}
+
+export default ({ world }) => {
+  return (
+    <>
+      <p>hello {world}</p>
+      <Link href="/" id="home">
+        to home
+      </Link>
+    </>
+  )
+}

test/integration/prerender/pages/lang/[lang]/about.js

@@ -0,0 +1,12 @@
+export default ({ lang }) => <p id="about">About: {lang}</p>
+
+export const getStaticProps = ({ params: { lang } }) => ({
+  props: {
+    lang,
+  },
+})
+
+export const getStaticPaths = () => ({
+  paths: ['en', 'es', 'fr', 'de'].map((p) => `/lang/${p}/about`),
+  fallback: false,
+})

test/integration/prerender/pages/non-json-blocking/[p].js

@@ -0,0 +1,21 @@
+import { useRouter } from 'next/router'
+
+export async function getStaticProps() {
+  return {
+    props: { time: new Date() },
+  }
+}
+
+export async function getStaticPaths() {
+  return { paths: [], fallback: 'blocking' }
+}
+
+const Page = ({ time }) => {
+  const { isFallback } = useRouter()
+
+  if (isFallback) return null
+
+  return <p>hello blocking {time.toString()}</p>
+}
+
+export default Page

test/integration/prerender/pages/non-json/[p].js

@@ -0,0 +1,21 @@
+import { useRouter } from 'next/router'
+
+export async function getStaticProps() {
+  return {
+    props: { time: new Date() },
+  }
+}
+
+export async function getStaticPaths() {
+  return { paths: [], fallback: true }
+}
+
+const Page = ({ time }) => {
+  const { isFallback } = useRouter()
+
+  if (isFallback) return null
+
+  return <p>hello {time.toString()}</p>
+}
+
+export default Page

test/integration/prerender/pages/normal.js

@@ -0,0 +1 @@
+export default () => <p id="normal-text">a normal page</p>

test/integration/prerender/pages/something.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+export async function getStaticProps({ params }) {
+  return {
+    props: {
+      world: 'world',
+      params: params || {},
+      time: new Date().getTime(),
+      random: Math.random(),
+    },
+    revalidate: false,
+  }
+}
+
+export default ({ world, time, params, random }) => {
+  return (
+    <>
+      <p>hello: {world}</p>
+      <span>time: {time}</span>
+      <div id="random">{random}</div>
+      <div id="params">{JSON.stringify(params)}</div>
+      <div id="query">{JSON.stringify(useRouter().query)}</div>
+      <Link href="/" id="home">
+        to home
+      </Link>
+      <br />
+      <Link href="/another" id="another">
+        to another
+      </Link>
+    </>
+  )
+}

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

@@ -0,0 +1,28 @@
+import React from 'react'
+import Link from 'next/link'
+
+export async function getStaticPaths() {
+  return { paths: [], fallback: true }
+}
+
+export async function getStaticProps({ params }) {
+  return {
+    props: {
+      user: params.user,
+      time: (await import('perf_hooks')).performance.now(),
+    },
+    revalidate: 10,
+  }
+}
+
+export default ({ user, time }) => {
+  return (
+    <>
+      <p>User: {user}</p>
+      <span>time: {time}</span>
+      <Link href="/" id="home">
+        to home
+      </Link>
+    </>
+  )
+}

test/integration/prerender/test/index.test.ts

@@ -0,0 +1,70 @@
+/* eslint-env jest */
+import fs from 'fs-extra'
+import { join } from 'path'
+import {
+  check,
+  findPort,
+  killApp,
+  launchApp,
+  renderViaHTTP,
+} from 'next-test-utils'
+
+const appDir = join(__dirname, '..')
+const nextConfigPath = join(appDir, 'next.config.js')
+let app
+let appPort
+
+describe('SSG Prerender', () => {
+  describe('development mode getStaticPaths', () => {
+    beforeAll(async () => {
+      await fs.writeFile(
+        nextConfigPath,
+        // we set cpus to 1 so that we make sure the requests
+        // aren't being cached at the jest-worker level
+        `module.exports = { experimental: { cpus: 1 } }`
+      )
+      await fs.remove(join(appDir, '.next'))
+      appPort = await findPort()
+      app = await launchApp(appDir, appPort)
+    })
+    afterAll(async () => {
+      try {
+        await fs.remove(nextConfigPath)
+        await killApp(app)
+      } catch (err) {
+        console.error(err)
+      }
+    })
+
+    it('should work with firebase import and getStaticPaths', async () => {
+      const html = await renderViaHTTP(appPort, '/blog/post-1')
+      expect(html).toContain('post-1')
+      expect(html).not.toContain('Error: Failed to load')
+
+      const html2 = await renderViaHTTP(appPort, '/blog/post-1')
+      expect(html2).toContain('post-1')
+      expect(html2).not.toContain('Error: Failed to load')
+    })
+
+    it('should not cache getStaticPaths errors', async () => {
+      const errMsg = /The `fallback` key must be returned from getStaticPaths/
+      await check(() => renderViaHTTP(appPort, '/blog/post-1'), /post-1/)
+
+      const blogPage = join(appDir, 'pages/blog/[post]/index.js')
+      const origContent = await fs.readFile(blogPage, 'utf8')
+      await fs.writeFile(
+        blogPage,
+        origContent.replace('fallback: true,', '/* fallback: true, */')
+      )
+
+      try {
+        await check(() => renderViaHTTP(appPort, '/blog/post-1'), errMsg)
+
+        await fs.writeFile(blogPage, origContent)
+        await check(() => renderViaHTTP(appPort, '/blog/post-1'), /post-1/)
+      } finally {
+        await fs.writeFile(blogPage, origContent)
+      }
+    })
+  })
+})

test/integration/prerender/world.txt

@@ -0,0 +1 @@
+world