Next v9

.babelrc

@@ -1,4 +1,4 @@
 {
-  "presets": ["next/babel", "@zeit/next-typescript/babel"],
+  "presets": ["next/babel"],
   "plugins": ["emotion"]
 }

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

next.config.js

@@ -1,8 +1,7 @@
-const withTypescript = require('@zeit/next-typescript')
 const path = require('path')
 const fs = require('fs')
 
-const config = withTypescript({
+const config = {
   webpack(config) {
     config.resolve.alias = Object.assign({}, config.resolve.alias, {
       // Must also change tsconfig.json
@@ -42,6 +41,6 @@ const config = withTypescript({
 
     return defaultPathMap
   }
-})
+}
 
 module.exports = config

package.json

@@ -1,19 +1,18 @@
 {
   "private": true,
   "dependencies": {
-    "@emotion/core": "^10.0.10",
-    "@emotion/styled": "^10.0.12",
-    "@material-ui/core": "^4.1.0",
-    "@zeit/next-typescript": "^1.1.1",
+    "@emotion/core": "^10.0.14",
+    "@emotion/styled": "^10.0.14",
+    "@material-ui/core": "^4.2.0",
     "color": "^3.1.2",
     "lodash": "^4.17.11",
-    "luxon": "^1.16.0",
-    "next": "8.1.0",
+    "luxon": "^1.16.1",
+    "next": "9.0.0",
     "nprogress": "^0.2.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "smoothscroll-polyfill": "^0.4.4",
-    "twemoji": "^12.0.4"
+    "twemoji": "^12.1.2"
   },
   "_moduleAliases": {
     "src": ".tsbuild/src",
@@ -34,50 +33,49 @@
     "tsc": "tsc",
     "eslint": "eslint --ext .js,.ts,.tsx .",
     "eslint:fix": "eslint --ext .js,.ts,.tsx --fix .",
-    "build:en": "yarn tsc && yarn eslint && PRODUCTION_LOCALE=en yarn sitemap && PRODUCTION_LOCALE=en next build && PRODUCTION_LOCALE=en next export",
-    "build:jp": "yarn tsc && yarn eslint && PRODUCTION_LOCALE=jp yarn sitemap && PRODUCTION_LOCALE=jp next build && PRODUCTION_LOCALE=jp next export",
+    "build:en": "PRODUCTION_LOCALE=en yarn sitemap && PRODUCTION_LOCALE=en next build && PRODUCTION_LOCALE=en next export",
+    "build:jp": "PRODUCTION_LOCALE=jp yarn sitemap && PRODUCTION_LOCALE=jp next build && PRODUCTION_LOCALE=jp next export",
     "twemoji": "mkdir -p .twemoji && rm -f src/components/Twemoji/* && rm -f .twemoji/* && cp `yarn --silent ts-node .tsbuild/scripts/copyUsedEmojis.js` .twemoji && svgr --ext tsx --no-svgo --filename-case kebab --no-dimensions -d src/components/Twemoji .twemoji && eslint --ext .tsx --fix src/components/Twemoji && yarn twemoji:bundle",
     "twemoji:bundle": "yarn ts-node .tsbuild/scripts/generateEmojisBundle.js",
     "twemoji:watch": "yarn ts-node .tsbuild/scripts/generateEmojisBundle.js watch",
-    "type-check": "tsc -w",
     "test": "jest"
   },
   "devDependencies": {
-    "@svgr/cli": "^4.3.0",
+    "@svgr/cli": "^4.3.1",
     "@types/color": "^3.0.0",
-    "@types/fs-extra": "^7.0.0",
+    "@types/fs-extra": "^8.0.0",
     "@types/glob": "^7.1.1",
     "@types/jest": "^24.0.13",
-    "@types/lodash": "^4.14.134",
-    "@types/luxon": "^1.15.1",
+    "@types/lodash": "^4.14.136",
+    "@types/luxon": "^1.15.2",
     "@types/material-ui": "^0.21.6",
-    "@types/next": "^8.0.5",
+    "@types/node": "^12.6.0",
     "@types/nprogress": "^0.2.0",
     "@types/prettier": "^1.16.4",
-    "@types/react": "^16.8.19",
+    "@types/react": "^16.8.23",
     "@types/react-dom": "^16.8.4",
     "@types/smoothscroll-polyfill": "^0.3.1",
-    "@typescript-eslint/eslint-plugin": "^1.10.2",
-    "@typescript-eslint/parser": "^1.10.2",
+    "@typescript-eslint/eslint-plugin": "^1.11.0",
+    "@typescript-eslint/parser": "^1.11.0",
     "babel-eslint": "^10.0.1",
-    "babel-plugin-emotion": "^10.0.13",
-    "chokidar": "^3.0.1",
-    "concurrently": "^4.1.0",
+    "babel-plugin-emotion": "^10.0.14",
+    "chokidar": "^3.0.2",
+    "concurrently": "^4.1.1",
     "eslint": "^5.16.0",
-    "eslint-config-prettier": "^4.3.0",
+    "eslint-config-prettier": "^6.0.0",
     "eslint-config-react-app": "^4.0.1",
-    "eslint-plugin-flowtype": "^3.10.1",
-    "eslint-plugin-import": "^2.17.3",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-flowtype": "^3.11.1",
+    "eslint-plugin-import": "^2.18.0",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-react": "^7.13.0",
-    "eslint-plugin-react-hooks": "^1.6.0",
-    "fs-extra": "^8.0.1",
+    "eslint-plugin-react": "^7.14.2",
+    "eslint-plugin-react-hooks": "^1.6.1",
+    "fs-extra": "^8.1.0",
     "glob": "^7.1.4",
     "jest": "^24.8.0",
     "module-alias": "^2.2.0",
     "prettier": "^1.18.2",
-    "sitemap": "^2.2.0",
+    "sitemap": "^3.2.1",
     "ts-jest": "^24.0.2",
     "typescript": "^3.5.1"
   }

src/components/ContentTags/Links.tsx

@@ -33,18 +33,11 @@ export const ExternalLink = (props: JSX.IntrinsicElements['a']) => (
 // NOTE: passHref is necessary if you use emotion
 export const InternalLink = ({
   href,
-  prefetch,
   ...props
-}: JSX.IntrinsicElements['a'] & {
-  prefetch: boolean
-}) => (
+}: JSX.IntrinsicElements['a']) => (
   <LinkContext.Provider value={{ inLink: true }}>
-    <Link href={href} passHref prefetch={prefetch}>
+    <Link href={href} passHref>
       <a {...props} css={commonLinkClass} />
     </Link>
   </LinkContext.Provider>
 )
-
-InternalLink.defaultProps = {
-  prefetch: false
-}

src/components/EpisodeHero.tsx

@@ -50,7 +50,6 @@ const EpisodeHero = () => {
             >
               <InternalLink
                 href={'/'}
-                prefetch
                 css={css`
                   text-decoration: none;
                 `}

src/components/EpisodePageHeader.tsx

@@ -41,7 +41,6 @@ const EpisodePageHeader = ({
               <InternalLink
                 href={`/${episodeNumber === 1 ? '' : episodeNumber - 1}`}
                 css={navigationLinkClasses(isBottom)}
-                prefetch
               >
                 «{' '}
                 <H
@@ -73,7 +72,6 @@ const EpisodePageHeader = ({
               <InternalLink
                 href={`/${episodeNumber + 1}`}
                 css={navigationLinkClasses(isBottom)}
-                prefetch
               >
                 <H
                   args={{ name: 'titlePrefixColored' }}

src/components/GlobalState.tsx

@@ -1,13 +1,11 @@
-import { withRouter, WithRouterProps } from 'next/router'
+import { useRouter, PublicRouterInstance } from 'next/router'
 import React, { useState, useEffect } from 'react'
 import GlobalContext, {
   globalContextDefault
 } from 'src/components/GlobalContext'
 
-const GlobalState = ({
-  children,
-  router
-}: { children: React.ReactNode } & WithRouterProps) => {
+const GlobalState = ({ children }: { children: React.ReactNode }) => {
+  const router: PublicRouterInstance = useRouter()
   const [initialRender, setInitialRender] = useState(
     globalContextDefault.initialRender
   )
@@ -41,4 +39,4 @@ const GlobalState = ({
   )
 }
 
-export default withRouter(GlobalState)
+export default GlobalState

tsconfig.json

@@ -17,13 +17,33 @@
     "sourceMap": true,
     "skipLibCheck": true,
     "baseUrl": ".",
-    "lib": ["dom", "esnext"],
+    "lib": [
+      "dom",
+      "esnext"
+    ],
     "paths": {
-      "src/*": ["src/*"],
-      "test/*": ["test/*"],
-      "scripts/*": ["scripts/*"],
-      "*": ["node_modules/*", "src/types/*"]
-    }
+      "src/*": [
+        "src/*"
+      ],
+      "test/*": [
+        "test/*"
+      ],
+      "scripts/*": [
+        "scripts/*"
+      ],
+      "*": [
+        "node_modules/*",
+        "src/types/*"
+      ]
+    },
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true
   },
-  "include": ["./src", "./pages"]
+  "include": [
+    "./src",
+    "./pages"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }