Upgrade to Next 13 (#24)

* upgrades to next.js 13

* fixes typescript errors

* fixes some lint warnings

* updates node versions

Author: soupaJ

Diff for: .eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@next/next/no-img-element": "off"
+  }
 }

Diff for: .github/workflows/build.yml

@@ -5,26 +5,25 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
   pull_request:
-    branches: [ main ]
+    branches: [main]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [14.x, 16.x]
+        node-version: [16.x, 18.x]
 
     steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v2
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'npm'
-    - run: npm i
-    - run: npm run lint
-    - run: npm run build
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
+      - run: npm i
+      - run: npm run lint
+      - run: npm run build

Diff for: components/footer.tsx

@@ -4,10 +4,8 @@ import Logo from "./logo";
 export default function Footer() {
   return (
     <div className="mx-4 my-10 flex items-center justify-center">
-      <Link href="/">
-        <a aria-label="Gistdoc" className="h-8 w-8">
-          <Logo />
-        </a>
+      <Link href="/" aria-label="Gistdoc" className="h-8 w-8" passHref>
+        <Logo />
       </Link>
     </div>
   );

Diff for: components/gist-document/gist-document.tsx

@@ -22,7 +22,7 @@ export default function GistDocument({
   const filenames = Object.keys(files);
   const markdownFile = findMarkdownFile(filenames);
 
-  if (!markdownFile) return <UnsupportedGist />;
+  if (!markdownFile || !gistData) return <UnsupportedGist />;
 
   const { content } = files[markdownFile];
 

Diff for: components/link/link-with-avatar.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import Link, { LinkProps } from "./link";
 
 interface LinkWithAvatarProps extends LinkProps {
@@ -10,19 +11,22 @@ export default function LinkWithAvatar({
   alt,
   href,
   children,
+  variant = "subtle",
   ...rest
 }: LinkWithAvatarProps) {
   return (
     <Link
       href={href}
-      variant="subtle"
+      variant={variant}
       className="flex items-center text-gray-500"
       {...rest}
     >
       <img
         src={avatarUrl}
         alt={alt}
-        className="w-[28px] h-[28px] rounded-full mr-2"
+        width={28}
+        height={28}
+        className="rounded-full mr-2"
       />
       {children}
     </Link>

Diff for: components/link/link.tsx

@@ -1,9 +1,12 @@
+import type { Url } from "next/dist/shared/lib/router/router";
 import NextLink, { LinkProps as NextLinkProps } from "next/link";
 import { AnchorHTMLAttributes } from "react";
 
-export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+export type LinkProps = {
   variant?: "subtle" | "button" | "unstyled";
-}
+  href?: Url;
+} & Omit<NextLinkProps, "href"> &
+  AnchorHTMLAttributes<HTMLAnchorElement>;
 
 const variantClasses = {
   normal: "text-sky-600 no-underline hover:underline",
@@ -15,18 +18,18 @@ const variantClasses = {
 
 export default function Link({
   href,
-  variant,
+  variant = "unstyled",
   className,
   ...props
 }: React.PropsWithChildren<LinkProps>) {
   const baseClasses = variantClasses[variant] ?? variantClasses.normal;
+  const LinkComponent = href ? NextLink : "a";
 
   return (
-    <NextLink href={href}>
-      <a
-        {...props}
-        className={`${baseClasses}${className ? ` ${className}` : ""}`}
-      />
-    </NextLink>
+    <LinkComponent
+      href={href || "#"}
+      {...props}
+      className={`${baseClasses}${className ? ` ${className}` : ""}`}
+    />
   );
 }

Diff for: components/markdown/CodeBlock.tsx

@@ -30,14 +30,17 @@ export default function CodeBlock({
     );
   }
 
-  const language = className.replace("language-", "");
+  const language = className?.replace("language-", "");
   const codeToParse = String(children?.[0] || "");
+  const child = language ? (
+    <SyntaxHighlighter language={language} code={codeToParse} />
+  ) : (
+    codeToParse
+  );
 
   return (
     <code className={className}>
-      <Suspense fallback={codeToParse}>
-        <SyntaxHighlighter language={language} code={codeToParse} />
-      </Suspense>
+      <Suspense fallback={codeToParse}>{child}</Suspense>
     </code>
   );
 }

Diff for: components/syntax-highlighter/syntax-highlighter.tsx

@@ -28,13 +28,15 @@ export default function SyntaxHighlighter({
   const languageConfig = languages.find((langConfig) =>
     langConfig.alias.includes(language)
   );
-  const block = useRef();
+  const block = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     let mounted = true;
 
     (async function () {
-      const languageSupport = await languageConfig.load();
+      const languageSupport = languageConfig
+        ? await languageConfig.load()
+        : null;
 
       if (block.current && mounted) {
         const extensions = [
@@ -58,10 +60,13 @@ export default function SyntaxHighlighter({
           syntaxHighlighting(defaultHighlightStyle),
           syntaxHighlighting(highlightStyle),
           highlightSpecialChars(),
-          languageSupport,
           EditorState.tabSize.of(2),
         ];
 
+        if (languageSupport) {
+          extensions.push(languageSupport);
+        }
+
         let view = new EditorView({
           doc: code.trimEnd(),
           extensions,

Diff for: components/theme-toggle/theme-toggle.tsx

@@ -8,7 +8,7 @@ export default function ThemeToggle() {
   // This is required to prevent the animation from playing on
   // initial mount as well as update the aria-label.
   const changedRef = useRef(false);
-  const [colorScheme, setColorScheme] = useState(null);
+  const [colorScheme, setColorScheme] = useState<"dark" | "light" | null>(null);
   const handleChange = useCallback(
     (ev) => {
       const colorScheme = resolveColorScheme(ev.target.checked);
@@ -56,7 +56,7 @@ export default function ThemeToggle() {
         // It's set to auto for the first time since the user didn't
         // actually change it and we set the theme automatically based
         // on preference.
-        aria-label={hasThemeChanged ? colorScheme : "auto"}
+        aria-label={(hasThemeChanged && colorScheme) || "auto"}
         aria-live="polite"
         id="theme-toggle"
         className={`sr-only peer`}

Diff for: constants.js

@@ -0,0 +1,9 @@
+const constants = {
+  GITHUB_API_BASE_URL: "https://api.github.com",
+  GIST: {
+    HOME: "59ff2b40f69fc7f4ea2fdd6b1a044648",
+    CHANGELOG: "2ff7302367044178af3eeaee4384a4ba",
+  },
+};
+
+export default constants;

Diff for: constants.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

Diff for: next-env.d.ts

@@ -14,7 +14,7 @@
     "@codemirror/view": "^6.0.2",
     "@lezer/highlight": "^1.0.0",
     "dayjs": "^1.10.7",
-    "next": "^12.1.6",
+    "next": "^13.4.19",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^7.1.2",

Diff for: package-lock.json

@@ -1,6 +1,7 @@
 module.exports = {
   darkMode: "class",
   content: [
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
     "./pages/**/*.{js,ts,jsx,tsx}",
     "./components/**/*.{js,ts,jsx,tsx}",
   ],

Diff for: package.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -17,14 +13,20 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
   },
   "include": [
     "next-env.d.ts",
+    "**/*.js",
     "**/*.ts",
-    "**/*.tsx"
+    "**/*.tsx",
+    ".next/types/**/*.ts"
   ],
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules"]
 }