chore: upgrade next

.eslintrc.json

@@ -1,6 +1,30 @@
 {
-  "extends": "next/core-web-vitals",
+  "extends": ["eslint:recommended"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2021,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
   "rules": {
-    "react/no-unescaped-entities": "off"
-  }
+    "react/no-unescaped-entities": "off",
+    "no-unused-vars": "off",
+    "no-undef": "off",
+    "no-extra-boolean-cast": "off",
+    "no-unreachable": "off"
+  },
+  "ignorePatterns": [
+    ".next/**",
+    "node_modules/**",
+    "out/**",
+    "public/**",
+    "pages/api/og.tsx"
+  ]
 }

components/Typedoc/Provider.tsx

@@ -1,9 +1,9 @@
 import { createContext, useContext } from "react";
 import { TypedocPage } from "@/lib/typedoc";
 
-const TypedocsContext = createContext<{ typedocs: TypedocPage[] }>({
-  typedocs: [],
-});
+const TypedocsContext = createContext<{ typedocs: TypedocPage[] } | undefined>(
+  undefined,
+);
 
 export const TypedocsProvider = ({
   children,

components/ui/Autocomplete.tsx

@@ -13,6 +13,7 @@ import { ScrollerBottomGradient } from "./Page/ScrollerBottomGradient";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import React, {
+  RefObject,
   useCallback,
   useEffect,
   useMemo,
@@ -629,7 +630,7 @@ const Autocomplete = () => {
         >
           {/* Adds a white shadow to the bottom of the autocomplete when items below scroll */}
           <ScrollerBottomGradient
-            scrollerRef={scrollerRef}
+            scrollerRef={scrollerRef as RefObject<HTMLDivElement>}
             gradientProps={{
               height: "20",
             }}

components/ui/Breadcrumbs.tsx

@@ -32,7 +32,6 @@ const Breadcrumbs = ({ pages }: BreadcrumbsProps) => {
               size="2"
               color="gray"
               style={{
-                // @ts-expect-error shut it
                 textWrap: "nowrap",
               }}
             >

components/ui/Callout.tsx

@@ -44,7 +44,7 @@ export const Callout = ({
   isCentered?: boolean;
   maxWidth?: string;
   style?: React.CSSProperties;
-}): JSX.Element => {
+}): React.JSX.Element => {
   // Determine emoji and bgColor:
   // 1. If type is provided, use type's config
   // 2. If custom emoji/bgColor provided, use those

components/ui/Card.tsx

@@ -1,4 +1,4 @@
-import { type ReactElement } from "react";
+import { type ReactElement, type ReactNode } from "react";
 import { Box, Stack } from "@telegraph/layout";
 import { MenuItem } from "@telegraph/menu";
 import Link from "next/link";
@@ -7,12 +7,18 @@ import { Text } from "@telegraph/typography";
 type Props = {
   emoji?: string;
   title: string;
+  children?: ReactNode;
   linkUrl: string;
   footer?: ReactElement;
   isExternal?: boolean;
 };
 
-const CardGroup = ({ children, cols = 2 }) => (
+type CardGroupProps = {
+  children: ReactNode;
+  cols?: number;
+};
+
+const CardGroup = ({ children, cols = 2 }: CardGroupProps) => (
   <Stack
     style={{
       display: "grid",
@@ -24,14 +30,14 @@ const CardGroup = ({ children, cols = 2 }) => (
   </Stack>
 );
 
-const Card: React.FC<Props> = ({
+const Card = ({
   emoji,
   title,
   children,
   footer,
   linkUrl,
   isExternal = false,
-}) => (
+}: Props) => (
   <Stack h="full" rounded="2" border="px" borderColor="gray-4">
     <MenuItem
       h="full"

components/ui/NavItem.tsx

@@ -81,15 +81,16 @@ const NavItem = ({
       <Text
         as="span"
         weight="medium"
-        style={{
-          fontSize: "13px",
-          // @ts-expect-error textWrap is fine
-          textWrap: "nowrap",
-          // Easy way to vertically align the text
-          verticalAlign: "text-bottom",
-          "--color": isActive ? "var(--tgph-gray-12)" : "var(--tgph-gray-11)",
-          ...(textProps.style || {}),
-        }}
+        style={
+          {
+            fontSize: "13px",
+            textWrap: "nowrap",
+            // Easy way to vertically align the text
+            verticalAlign: "text-bottom",
+            "--color": isActive ? "var(--tgph-gray-12)" : "var(--tgph-gray-11)",
+            ...(textProps.style || {}),
+          } as React.CSSProperties
+        }
         {...textPropsWithoutStyle}
       >
         {children}

components/ui/OverviewContent/Blocks.tsx

@@ -8,12 +8,12 @@ import React from "react";
 import Image from "next/image";
 import { TgphComponentProps } from "@telegraph/helpers";
 
-type IconComponent = () => JSX.Element;
+type IconComponent = () => React.JSX.Element;
 type IconType = keyof typeof Icons | LucideIcon | IconComponent;
 
-function getIcon(icon?: IconType): IconComponent | React.ReactNode {
+function getIcon(icon?: IconType): IconComponent | LucideIcon {
   if (typeof icon === "function") {
-    return icon as IconComponent;
+    return icon as IconComponent | LucideIcon;
   }
 
   if (typeof icon === "string") {
@@ -22,7 +22,7 @@ function getIcon(icon?: IconType): IconComponent | React.ReactNode {
     // can't be properly type checked.
     const lowercasedIcon = icon.toLowerCase();
     if (Icons[lowercasedIcon as keyof typeof Icons]) {
-      return Icons[lowercasedIcon as keyof typeof Icons] as () => JSX.Element;
+      return Icons[lowercasedIcon as keyof typeof Icons] as IconComponent;
     }
 
     // We throw an error here so that a build can't complete if there is an icon that
@@ -32,7 +32,7 @@ function getIcon(icon?: IconType): IconComponent | React.ReactNode {
     );
   }
 
-  return icon as React.ReactNode;
+  return icon as unknown as LucideIcon;
 }
 
 export const Tool = ({
@@ -66,7 +66,7 @@ export const Tool = ({
       >
         {typeof _icon === "function" ? (
           <Box w="8" h="8" bg="black" color="white" p="2" borderRadius="2">
-            {_icon()}
+            {(_icon as IconComponent)()}
           </Box>
         ) : (
           <Icon
@@ -134,7 +134,7 @@ export const ContentCard = ({
       >
         {typeof _icon === "function" ? (
           <Box w="10" h="10" bg="gray-2" p="2" borderRadius="2">
-            {_icon()}
+            {(_icon as IconComponent)()}
           </Box>
         ) : (
           <Icon

components/ui/Page/OnThisPage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useState, useRef, RefObject } from "react";
 import Link from "next/link";
 import { Box, Stack } from "@telegraph/layout";
 import { Text as TextIcon } from "lucide-react";
@@ -156,7 +156,9 @@ const OnThisPage: React.FC<Props> = ({ title, sourcePath }) => {
           >
             <HeaderList headers={headers} nesting={0} />
           </Stack>
-          <ScrollerBottomGradient scrollerRef={scrollerRef} />
+          <ScrollerBottomGradient
+            scrollerRef={scrollerRef as RefObject<HTMLDivElement>}
+          />
           <Box borderTop="px" borderColor="gray-3" mb="4" />
           <Text
             as="a"

components/ui/Page/ScrollerBottomGradient.tsx

@@ -3,7 +3,7 @@ import { Box } from "@telegraph/layout";
 import { TgphComponentProps } from "@telegraph/helpers";
 
 export function useOnRefReady<T extends HTMLElement>(
-  ref: React.RefObject<T>,
+  ref: React.RefObject<T | null>,
   callback: (node: T) => void,
 ) {
   const lastNodeRef = useRef<T | null>(null);

layouts/MDXLayout.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ReactNode } from "react";
 import { FrontMatter } from "../types";
 
 import { DocsLayout } from "./DocsLayout";
@@ -8,9 +8,13 @@ import InAppUILayout from "./InAppUILayout";
 
 import { useRouter } from "next/router";
 
-const MDXLayout: React.FC<{ frontMatter: FrontMatter; sourcePath: string }> = (
-  props,
-) => {
+type MDXLayoutProps = {
+  frontMatter: FrontMatter;
+  sourcePath: string;
+  children: ReactNode;
+};
+
+const MDXLayout = (props: MDXLayoutProps) => {
   const { asPath } = useRouter();
 
   switch (props.frontMatter.layout) {

next-env.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
 /// <reference types="next/navigation-types/compat/navigation" />
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package.json

@@ -8,7 +8,7 @@
     "algolia-index-cleanup": "node bin/algolia-index-cleanup.js",
     "start": "next start",
     "export": "next export",
-    "lint": "next lint",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx --ignore-path .gitignore",
     "type-check": "tsc",
     "format": "prettier \"**/*.+(ts|js|tsx|mdx|md)\"",
     "format.write": "yarn run format --write",
@@ -46,20 +46,19 @@
     "@vercel/og": "^0.5.20",
     "algoliasearch": "^4.13.0",
     "deepmerge": "^4.3.1",
-    "eslint-config-next": "14.2.32",
     "eventemitter": "^0.3.3",
     "framer-motion": "^12.7.4",
     "isomorphic-unfetch": "3.1.0",
     "jsonpointer": "^5.0.1",
     "locale-codes": "^1.3.1",
     "lodash": "^4.17.21",
     "lucide-react": "^0.525.0",
-    "next": "14.2.32",
+    "next": "^16.0.1",
     "next-mdx-remote": "^4.4.1",
     "next-remote-refresh": "^0.10.1",
     "next-seo": "^5.4.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "react-hotkeys-hook": "^3.4.6",
     "react-icons": "5.2.0",
     "react-markdown": "^10.1.0",
@@ -76,14 +75,17 @@
   "devDependencies": {
     "@types/gtag.js": "^0.0.5",
     "@types/node": "^14.14.32",
-    "@types/react": "^17.0.3",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@typescript-eslint/parser": "^5.62.0",
     "autoprefixer": "^10.4.16",
-    "eslint": "^7.31.0",
+    "eslint": "^8.57.0",
     "openapi-to-md": "^1.0.25",
     "postcss": "^8.4.31",
     "prettier": "^2.3.2",
     "rehype-autolink-headings": "^7.0.0",
     "remark-slug": "^6.0.0",
+    "strip-ansi": "^6.0.1",
     "tailwindcss": "^3.3.3",
     "ts-node": "^10.9.2",
     "tsx": "^4.19.4",

scripts/generateApiMarkdown.ts

@@ -21,12 +21,10 @@ import {
 // Utility functions
 async function parseFrontmatter(markdownContent) {
   const file = await unified()
-    // @ts-expect-error idk
     .use(remarkParse)
     .use(remarkFrontmatter, ["yaml"])
     .parse(markdownContent);
 
-  // @ts-expect-error idk
   const yamlNode = file.children.find((node) => node.type === "yaml");
   if (!yamlNode) return null;
   return yaml.parse(yamlNode.value);

scripts/generateLlmsTxt.ts

@@ -92,12 +92,10 @@ async function writeApiMarkdown(name: "api" | "mapi") {
 // Utility functions
 async function parseFrontmatter(markdownContent) {
   const file = await unified()
-    // @ts-expect-error idk
     .use(remarkParse)
     .use(remarkFrontmatter, ["yaml"])
     .parse(markdownContent);
 
-  // @ts-expect-error idk
   const yamlNode = file.children.find((node) => node.type === "yaml");
   if (!yamlNode) return null;
   return yaml.parse(yamlNode.value);

tsconfig.json

@@ -18,11 +18,13 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
     },
     "plugins": [
       {
@@ -34,8 +36,8 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    ".next/types/**/*.ts"
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
   ],
-  "exclude": [
-  ]
+  "exclude": []
 }