fix: correctly handle ISR for appDir pages

.github/workflows/e2e-appdir.yml

@@ -41,7 +41,6 @@ jobs:
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_BOT_AUTH_TOKEN }}
           NETLIFY_SITE_ID: 1d5a5c76-d445-4ae5-b694-b0d3f2e2c395
-          NEXT_TEST_VERSION: canary
       - uses: actions/upload-artifact@v3
         if: ${{ always() }}
         name: Upload test results

.github/workflows/test.yml

@@ -15,32 +15,19 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, macOS-latest, windows-latest]
-        node-version: [14, '*']
-        exclude:
-          - os: macOS-latest
-            node-version: 14
-          - os: windows-latest
-            node-version: 14
       fail-fast: false
 
     steps:
       - uses: actions/checkout@v2
       - name: Installing with LTS Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: 'lts/*'
+          node-version: 16
           check-latest: true
       - name: NPM Install
         run: npm install
-      - name: Switching to Node.js ${{ matrix.node-version }} to run tests
-        uses: actions/setup-node@v2
-        if: "${{ matrix.node-version != 'lts/*' }}"
-        with:
-          node-version: ${{ matrix.node-version }}
-          check-latest: true
       - name: Linting
         run: npm run format:ci
-        if: "${{ matrix.node-version == 'lts/*' }}"
       - name: Run tests against next@latest
         run: npm test
   canary:
@@ -50,12 +37,6 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, macOS-latest, windows-latest]
-        node-version: [14, '*']
-        exclude:
-          - os: macOS-latest
-            node-version: 14
-          - os: windows-latest
-            node-version: 14
       fail-fast: false
 
     if: github.ref_name == 'main'
@@ -64,17 +45,11 @@ jobs:
       - name: Installing with LTS Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: 'lts/*'
+          node-version: 16
           check-latest: true
       - name: NPM Install
         run: npm install
       - name: Install Next.js Canary
         run: npm install -D next@canary --legacy-peer-deps
-      - name: Switching to Node.js ${{ matrix.node-version }} to run tests
-        uses: actions/setup-node@v2
-        if: "${{ matrix.node-version != 'lts/*' }}"
-        with:
-          node-version: ${{ matrix.node-version }}
-          check-latest: true
       - name: Run tests against next@canary
         run: npm test

cypress/integration/default/appdir.spec.ts

@@ -0,0 +1,77 @@
+describe('appDir', () => {
+  it('renders ISR appdir pages as HTML by default', () => {
+    cy.request({ url: '/blog/erica/', followRedirect: false }).then((response) => {
+      expect(response.headers['content-type']).to.match(/^text\/html/)
+    })
+  })
+
+  it('renders static appdir pages as HTML by default', () => {
+    cy.request({ url: '/blog/erica/first-post/', followRedirect: false }).then((response) => {
+      expect(response.headers['content-type']).to.match(/^text\/html/)
+    })
+  })
+
+  it('renders dynamic appdir pages as HTML by default', () => {
+    cy.request({ url: '/blog/erica/random-post/', followRedirect: false }).then((response) => {
+      expect(response.headers['content-type']).to.match(/^text\/html/)
+    })
+  })
+
+  it('returns RSC data for RSC requests to ISR pages', () => {
+    cy.request({
+      url: '/blog/erica/',
+      headers: {
+        RSC: '1',
+      },
+      followRedirect: false,
+    }).then((response) => {
+      expect(response.headers).to.have.property('content-type', 'application/octet-stream')
+    })
+  })
+
+  it('returns RSC data for RSC requests to static pages', () => {
+    cy.request({
+      url: '/blog/erica/first-post/',
+      headers: {
+        RSC: '1',
+      },
+      followRedirect: false,
+    }).then((response) => {
+      expect(response.headers).to.have.property('content-type', 'application/octet-stream')
+    })
+  })
+
+  it('returns RSC data for RSC requests to dynamic pages', () => {
+    cy.request({
+      url: '/blog/erica/random-post/',
+      headers: {
+        RSC: '1',
+      },
+      followRedirect: false,
+    }).then((response) => {
+      expect(response.headers).to.have.property('content-type', 'application/octet-stream')
+    })
+  })
+
+  it('correctly redirects HTML requests for ISR pages', () => {
+    cy.request({ url: '/blog/erica', followRedirect: false }).then((response) => {
+      expect(response.status).to.equal(308)
+      expect(response.headers).to.have.property('location', '/blog/erica/')
+    })
+  })
+
+  // This needs trailing slash handling to be fixed
+  it.skip('correctly redirects HTML requests for static pages', () => {
+    cy.request({ url: '/blog/erica/first-post', followRedirect: false }).then((response) => {
+      expect(response.status).to.equal(308)
+      expect(response.headers).to.have.property('location', '/blog/erica/first-post/')
+    })
+  })
+
+  it('correctly redirects HTML requests for dynamic pages', () => {
+    cy.request({ url: '/blog/erica/random-post', followRedirect: false }).then((response) => {
+      expect(response.status).to.equal(308)
+      expect(response.headers).to.have.property('location', '/blog/erica/random-post/')
+    })
+  })
+})

demos/default/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "../../node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

demos/default/app/blog/[author]/[slug]/page.tsx

@@ -0,0 +1,60 @@
+import { notFound } from 'next/navigation'
+
+export const revalidate = null
+
+export const dynamicParams = true
+
+export default function Page({ params }) {
+  if (params.author === 'matt') {
+    return notFound()
+  }
+  return (
+    <>
+      <p id="page">/blog/[author]/[slug]</p>
+      <p id="params">{JSON.stringify(params)}</p>
+      <p id="date">{Date.now()}</p>
+    </>
+  )
+}
+
+export function generateStaticParams({ params }: any) {
+  console.log('/blog/[author]/[slug] generateStaticParams', JSON.stringify(params))
+
+  switch (params.author) {
+    case 'erica': {
+      return [
+        {
+          slug: 'first-post',
+        },
+      ]
+    }
+    case 'sarah': {
+      return [
+        {
+          slug: 'second-post',
+        },
+      ]
+    }
+    case 'nick': {
+      return [
+        {
+          slug: 'first-post',
+        },
+        {
+          slug: 'second-post',
+        },
+      ]
+    }
+    case 'rob': {
+      return [
+        {
+          slug: 'second-post',
+        },
+      ]
+    }
+
+    default: {
+      throw new Error(`unexpected author param received ${params.author}`)
+    }
+  }
+}

demos/default/app/blog/[author]/layout.js

@@ -0,0 +1,14 @@
+export default function Layout({ children, params }) {
+  return (
+    <>
+      <p id="author-layout-params">{JSON.stringify(params)}</p>
+      {children}
+    </>
+  )
+}
+
+export function generateStaticParams(params) {
+  console.log('/blog/[author] generateStaticParams', JSON.stringify(params))
+
+  return [{ author: 'nick' }, { author: 'sarah' }, { author: 'rob' }, { author: 'erica' }]
+}

demos/default/app/blog/[author]/page.js

@@ -0,0 +1,39 @@
+import Link from 'next/link'
+
+export default async function Page({ params }) {
+  await fetch('http://example.com', {
+    next: { revalidate: 10 },
+  })
+  return (
+    <>
+      <p id="page">/blog/[author]</p>
+      <p id="params">{JSON.stringify(params)}</p>
+      <p id="date">{Date.now()}</p>
+      <Link href="/blog/erica" id="author-1">
+        /blog/erica
+      </Link>
+      <br />
+      <Link href="/blog/sarah" id="author-2">
+        /blog/sarah
+      </Link>
+      <br />
+      <Link href="/blog/nick" id="author-3">
+        /blog/nick
+      </Link>
+      <br />
+
+      <Link href="/blog/erica/first-post" id="author-1-post-1">
+        /blog/erica/first-post
+      </Link>
+      <br />
+      <Link href="/blog/sarah/second-post" id="author-2-post-1">
+        /blog/sarah/second-post
+      </Link>
+      <br />
+      <Link href="/blog/nick/first-post" id="author-3-post-1">
+        /blog/nick/first-post
+      </Link>
+      <br />
+    </>
+  )
+}

demos/default/app/layout.js

@@ -0,0 +1,10 @@
+export default function Layout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <title>my static blog</title>
+      </head>
+      <body>{children}</body>
+    </html>
+  )
+}

demos/default/next.config.js

@@ -84,5 +84,6 @@ module.exports = {
   },
   experimental: {
     optimizeCss: false,
+    appDir: true,
   },
 }

demos/default/pages/index.js

@@ -158,6 +158,12 @@ const Index = ({ shows, nodeEnv }) => {
             <Link href="/rewriteToStatic">Rewrite to static (should show getStaticProps/1)</Link>
           </li>
         </ul>
+        <h4>appDir</h4>
+        <ul>
+          <li>
+            <Link href="/blog/erica">app dir page</Link>
+          </li>
+        </ul>
         <h4>Preview mode</h4>
         <p>Preview mode: </p>
         <ul>

demos/default/tsconfig.json

@@ -11,14 +11,20 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
   "include": [
     "next-env.d.ts",
     "**/*.ts",
-    "**/*.tsx"
+    "**/*.tsx",
+    ".next/types/**/*.ts"
   ],
   "exclude": [
     "node_modules"
   ]
-}
+}