Next 13.4 and React 18 (#40039)

.babelrc

@@ -1,4 +0,0 @@
-{
-  "presets": ["next/babel"],
-  "plugins": ["styled-components"]
-}

.eslintrc.cjs

@@ -5,44 +5,53 @@ module.exports = {
     es2020: true,
     node: true,
   },
-  parser: '@babel/eslint-parser',
+  extends: [
-  extends: ['eslint:recommended', 'standard', 'plugin:import/errors', 'prettier'],
+    "eslint:recommended",
+    "standard",
+    "plugin:import/errors",
+    "prettier",
+  ],
   parserOptions: {
-    ecmaVersion: 11,
+    ecmaVersion: 2022,
-    requireConfigFile: 'false',
+    requireConfigFile: "false",
-    babelOptions: { configFile: './.babelrc' },
+    sourceType: "module",
-    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'],
+      files: ["**/*.tsx", "**/*.ts"],
-      plugins: ['@typescript-eslint', 'jsx-a11y'],
+      plugins: ["@typescript-eslint", "jsx-a11y"],
-      extends: ['plugin:jsx-a11y/recommended'],
+      extends: ["plugin:jsx-a11y/recommended"],
-      parser: '@typescript-eslint/parser',
+      parser: "@typescript-eslint/parser",
       rules: {
-        camelcase: 'off',
+        camelcase: "off",
-        'no-unused-vars': 'off',
+        "no-unused-vars": "off",
-        'no-undef': 'off',
+        "no-undef": "off",
-        'no-use-before-define': 'off',
+        "no-use-before-define": "off",
-        '@typescript-eslint/no-unused-vars': ['error'],
+        "@typescript-eslint/no-unused-vars": ["error"],
-        'jsx-a11y/no-onchange': 'off',
+        "jsx-a11y/no-onchange": "off",
       },
     },
   ],
   settings: {
-    'import/resolver': {
+    "import/resolver": {
       typescript: true,
-      node: true
+      node: true,
-    }
+    },
-  }
+  },
-}
+};

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

@@ -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/workflows/headless-tests.yml

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

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

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

.github/workflows/local-dev.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/sync-search-elasticsearch.yml

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

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

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

.github/workflows/test.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: ./.github/actions/cache-nextjs
-        uses: actions/cache@88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8
-        with:
-          path: .next/cache
-          key: ${{ runner.os }}-nextjs-${{ hashFiles('package*.json') }}
 
       - name: Run build script
         run: npm run build

.npmrc

@@ -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.

components/GenericError.tsx

@@ -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/Link.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>

jest.config.js

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

next.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,
+  },
 }

package.json

@@ -62,7 +62,7 @@
     "@primer/css": "^21.0.1",
     "@primer/octicons": "^19.1.0",
     "@primer/octicons-react": "^19.1.0",
-    "@primer/react": "^35.26.1",
+    "@primer/react": "35.27.0",
     "accept-language-parser": "^1.5.0",
     "ajv": "^8.11.0",
     "ajv-errors": "^3.0.0",
@@ -111,12 +111,12 @@
     "mdast-util-to-string": "^4.0.0",
     "morgan": "^1.10.0",
     "msgpack5rpc": "^1.1.0",
-    "next": "12.2.4",
+    "next": "13.4.12",
     "ora": "^7.0.1",
     "parse5": "7.1.2",
     "port-used": "^2.0.8",
-    "react": "^17.0.2",
+    "react": "18.2.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "18.2.0",
     "react-markdown": "^8.0.3",
     "react-syntax-highlighter": "^15.5.0",
     "rehype-highlight": "^6.0.0",
@@ -144,11 +144,6 @@
   "devDependencies": {
     "@actions/core": "^1.10.0",
     "@actions/github": "^5.0.3",
-    "@babel/core": "7.20.7",
-    "@babel/eslint-parser": "^7.18.2",
-    "@babel/plugin-syntax-top-level-await": "^7.14.5",
-    "@babel/plugin-transform-runtime": "^7.18.5",
-    "@babel/preset-env": "^7.18.2",
     "@graphql-inspector/core": "^5.0.0",
     "@graphql-tools/load": "^8.0.0",
     "@jest/globals": "29.6.1",
@@ -162,9 +157,6 @@
     "@types/react-syntax-highlighter": "^15.5.2",
     "@typescript-eslint/eslint-plugin": "6.0.0",
     "@typescript-eslint/parser": "6.0.0",
-    "babel-loader": "^9.0.1",
-    "babel-plugin-styled-components": "^2.0.7",
-    "babel-preset-env": "^1.7.0",
     "chalk": "^5.0.1",
     "change-case": "^4.1.2",
     "commander": "^11.0.0",
@@ -209,6 +201,7 @@
     "sass": "^1.52.3",
     "sentence-case": "^3.0.4",
     "start-server-and-test": "^2.0.0",
+    "ts-jest": "29.1.1",
     "typescript": "^5.0.2",
     "unist-util-remove": "^4.0.0",
     "unist-util-visit-parents": "6.0.1",

pages/_app.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react'
 import App from 'next/app'
 import type { AppProps, AppContext } from 'next/app'
 import Head from 'next/head'
-import { ThemeProvider, SSRProvider } from '@primer/react'
+import { ThemeProvider } from '@primer/react'
 
 import '../stylesheets/index.scss'
 
@@ -86,7 +86,6 @@ const MyApp = ({ Component, pageProps, languagesContext }: MyAppProps) => {
           content="c1kuD-K2HIVF635lypcsWPoD4kilo5-jA_wBFyT4uMY"
         />
       </Head>
-      <SSRProvider>
       <ThemeProvider
         colorMode={theme.component.colorMode}
         dayScheme={theme.component.dayScheme}
@@ -97,7 +96,6 @@ const MyApp = ({ Component, pageProps, languagesContext }: MyAppProps) => {
           <Component {...pageProps} />
         </LanguagesContext.Provider>
       </ThemeProvider>
-      </SSRProvider>
     </>
   )
 }