Next 13.4 and React 18 (#40039)

Author: peterbe

.babelrc

@@ -5,44 +5,53 @@ module.exports = {
     es2020: true,
     node: true,
   },
-  parser: '@babel/eslint-parser',
-  extends: ['eslint:recommended', 'standard', 'plugin:import/errors', 'prettier'],
+  extends: [
+    "eslint:recommended",
+    "standard",
+    "plugin:import/errors",
+    "prettier",
+  ],
   parserOptions: {
-    ecmaVersion: 11,
-    requireConfigFile: 'false',
-    babelOptions: { configFile: './.babelrc' },
-    sourceType: 'module',
+    ecmaVersion: 2022,
+    requireConfigFile: "false",
+    sourceType: "module",
   },
-  ignorePatterns: ['tmp/*', '!/.*', '/.next/', 'script/bookmarklets/*', 'rest-api-description/'],
+  ignorePatterns: [
+    "tmp/*",
+    "!/.*",
+    "/.next/",
+    "script/bookmarklets/*",
+    "rest-api-description/",
+  ],
   rules: {
-    'import/no-extraneous-dependencies': ['error', { packageDir: '.' }],
+    "import/no-extraneous-dependencies": ["error", { packageDir: "." }],
   },
   overrides: [
     {
-      files: ['**/tests/**/*.js'],
+      files: ["**/tests/**/*.js"],
       env: {
         jest: true,
       },
     },
     {
-      files: ['**/*.tsx', '**/*.ts'],
-      plugins: ['@typescript-eslint', 'jsx-a11y'],
-      extends: ['plugin:jsx-a11y/recommended'],
-      parser: '@typescript-eslint/parser',
+      files: ["**/*.tsx", "**/*.ts"],
+      plugins: ["@typescript-eslint", "jsx-a11y"],
+      extends: ["plugin:jsx-a11y/recommended"],
+      parser: "@typescript-eslint/parser",
       rules: {
-        camelcase: 'off',
-        'no-unused-vars': 'off',
-        'no-undef': 'off',
-        'no-use-before-define': 'off',
-        '@typescript-eslint/no-unused-vars': ['error'],
-        'jsx-a11y/no-onchange': 'off',
+        camelcase: "off",
+        "no-unused-vars": "off",
+        "no-undef": "off",
+        "no-use-before-define": "off",
+        "@typescript-eslint/no-unused-vars": ["error"],
+        "jsx-a11y/no-onchange": "off",
       },
     },
   ],
   settings: {
-    'import/resolver': {
+    "import/resolver": {
       typescript: true,
-      node: true
-    }
-  }
-}
+      node: true,
+    },
+  },
+};

.eslintrc.cjs

@@ -0,0 +1,18 @@
+# Based on https://nextjs.org/docs/pages/building-your-application/deploying/ci-build-caching#github-actions
+
+name: Cache Nextjs build cache
+
+description: Cache the .next/cache according to best practices
+
+runs:
+  using: 'composite'
+  steps:
+    - name: Cache .next/cache
+      uses: actions/cache@88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8 # pin @3.3.1
+      with:
+        path: ${{ github.workspace }}/.next/cache
+        # Generate a new cache whenever packages or source files change.
+        key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/*.ts', '**/*.tsx') }}
+        # If source files changed but packages didn't, rebuild from a prior cache.
+        restore-keys: |
+          ${{ runner.os }}-nextjs-v13-${{ hashFiles('**/package-lock.json') }}-

.github/actions/cache-nextjs/action.yml

@@ -35,11 +35,7 @@ jobs:
 
       - uses: ./.github/actions/node-npm-setup
 
-      - name: Cache nextjs build
-        uses: actions/cache@88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8
-        with:
-          path: .next/cache
-          key: ${{ runner.os }}-nextjs-${{ hashFiles('package*.json') }}
+      - uses: ./.github/actions/cache-nextjs
 
       - name: Run build script
         run: npm run build

.github/workflows/headless-tests.yml

@@ -25,11 +25,7 @@ jobs:
 
       - uses: ./.github/actions/node-npm-setup
 
-      - name: Cache nextjs build
-        uses: actions/cache@88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8
-        with:
-          path: .next/cache
-          key: ${{ runner.os }}-nextjs-${{ hashFiles('package*.json') }}
+      - uses: ./.github/actions/cache-nextjs
 
       - name: Build
         run: npm run build

.github/workflows/keep-caches-warm.yml

@@ -21,7 +21,9 @@ jobs:
       - name: Check out repo
         uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab
 
-      - uses: ./.github/actions/node-npm-setup
+      # - uses: ./.github/actions/node-npm-setup
+      - name: Install dependencies
+        run: npm install
 
       # Note that we don't check out docs-early-access, Elasticsearch,
       # or any remote translations. Nothing fancy here!

.github/workflows/local-dev.yml

@@ -126,11 +126,7 @@ jobs:
 
       - uses: ./.github/actions/node-npm-setup
 
-      - name: Cache nextjs build
-        uses: actions/cache@88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8
-        with:
-          path: .next/cache
-          key: ${{ runner.os }}-nextjs-${{ hashFiles('package*.json') }}
+      - uses: ./.github/actions/cache-nextjs
 
       - name: Run build scripts
         run: npm run build

.github/workflows/sync-search-elasticsearch.yml

@@ -51,11 +51,7 @@ jobs:
 
       - uses: ./.github/actions/node-npm-setup
 
-      - name: Cache nextjs build
-        uses: actions/cache@88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8
-        with:
-          path: .next/cache
-          key: ${{ runner.os }}-nextjs-${{ hashFiles('package*.json') }}
+      - uses: ./.github/actions/cache-nextjs
 
       - name: Build
         run: npm run build

.github/workflows/sync-search-pr.yml

@@ -152,11 +152,7 @@ jobs:
           echo __ format, write to get_diff_files.txt __
           echo $DIFF | tr '\n' ' ' > get_diff_files.txt
 
-      - name: Cache nextjs build
-        uses: actions/cache@88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8
-        with:
-          path: .next/cache
-          key: ${{ runner.os }}-nextjs-${{ hashFiles('package*.json') }}
+      - uses: ./.github/actions/cache-nextjs
 
       - name: Run build script
         run: npm run build

.github/workflows/test.yml

@@ -1,6 +1,3 @@
-# skip installing optional dependencies to avoid issues with troublesome `fsevents` module
-omit=optional
-
 # For 15-25% faster npm install
 # https://www.peterbe.com/plog/benchmarking-npm-install-with-or-without-audit
 # Also we have Dependabot alerts configured in the GitHub repo.

.npmrc

@@ -45,14 +45,14 @@ export const SimpleHeader = () => {
         aria-label="Main"
       >
         <div className="d-flex flex-items-center" style={{ zIndex: 3 }} id="github-logo-mobile">
-          <Link href={`/${router.locale}`}>
+          <Link href={`/${router.locale}`} passHref legacyBehavior>
             {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
             <a aria-hidden="true" tabIndex={-1}>
               <MarkGithubIcon size={32} className="color-fg-default" />
             </a>
           </Link>
 
-          <Link href={`/${router.locale}`}>
+          <Link href={`/${router.locale}`} passHref legacyBehavior>
             {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
             <a className="h4 color-fg-default no-underline no-wrap pl-2">GitHub Docs</a>
           </Link>

components/GenericError.tsx

@@ -25,7 +25,12 @@ export function Link(props: Props) {
   }
 
   return (
-    <NextLink href={locale ? `/${locale}${href}` : href || ''} locale={locale || false}>
+    <NextLink
+      href={locale ? `/${locale}${href}` : href || ''}
+      locale={locale || false}
+      passHref
+      legacyBehavior
+    >
       {/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
       <a rel={isExternal ? 'noopener' : ''} {...restProps} />
     </NextLink>

components/Link.tsx

@@ -9,6 +9,7 @@ if (isActions) {
 }
 
 export default {
+  preset: 'ts-jest',
   coverageThreshold: {
     global: {
       branches: 95,

jest.config.js

@@ -61,4 +61,8 @@ export default {
     // This makes it so that going Back will scroll to the previous position
     scrollRestoration: true,
   },
+
+  compiler: {
+    styledComponents: true,
+  },
 }