nextjs - 💡(How to fix) Fix next/link JSX type error when typedRoutes: true enabled [3 comments, 3 participants]

npx create-next-app@latest my-app
cd my-app

pnpm install

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  typedRoutes: true,
};

export default nextConfig;

import React from "react";
import Link from "next/link";

export default function page() {
  return (
    <div>
      <Link href="/" className="text-blue-500 hover:underline">
        Home
      </Link>
    </div>
  );
}

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  },
  "dependencies": {
    "next": "16.0.3",
    "react": "19.2.0",
    "react-dom": "19.2.0"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "16.0.3",
    "tailwindcss": "^4",
    "typescript": "^5"
  }
}

pnpm run build

'Link' cannot be used as a JSX component.
  Its type '<RouteType>(props: LinkProps<RouteType>) => Element' is not a valid JSX element type.
    Type '<RouteType>(props: LinkProps<RouteType>)' is not assignable to type '(props: any) => ReactNode | Promise<ReactNode>'.
      Type 'Element' is not assignable to type 'ReactNode | Promise<ReactNode>'.
        Property 'children' is missing in type 'ReactElement<any, any>' but required in type 'ReactPortal'.

// This file is generated automatically by Next.js
// Do not edit this file manually

type AppRoutes = "/" | "/test"
type PageRoutes = never
type LayoutRoutes = "/"
type RedirectRoutes = never
type RewriteRoutes = never
type Routes = AppRoutes | PageRoutes | LayoutRoutes | RedirectRoutes | RewriteRoutes


interface ParamMap {
  "/": {}
  "/test": {}
}


export type ParamsOf<Route extends Routes> = ParamMap[Route]

interface LayoutSlotMap {
  "/": never
}


export type { AppRoutes, PageRoutes, LayoutRoutes, RedirectRoutes, RewriteRoutes, ParamMap }

declare global {
  /**
   * Props for Next.js App Router page components
   * @example
   * ```tsx
   * export default function Page(props: PageProps<'/blog/[slug]'>) {
   *   const { slug } = await props.params
   *   return <div>Blog post: {slug}</div>
   * }
   * ```
   */
  interface PageProps<AppRoute extends AppRoutes> {
    params: Promise<ParamMap[AppRoute]>
    searchParams: Promise<Record<string, string | string[] | undefined>>
  }

  /**
   * Props for Next.js App Router layout components
   * @example
   * ```tsx
   * export default function Layout(props: LayoutProps<'/dashboard'>) {
   *   return <div>{props.children}</div>
   * }
   * ```
   */
  type LayoutProps<LayoutRoute extends LayoutRoutes> = {
    params: Promise<ParamMap[LayoutRoute]>
    children: React.ReactNode
  } & {
    [K in LayoutSlotMap[LayoutRoute]]: React.ReactNode
  }
}

> next build

   ▲ Next.js 16.0.3 (Turbopack)

   Creating an optimized production build ...
 ✓ Compiled successfully in 2.6s
   Running TypeScript  .Failed to compile.

./src/app/test/page.tsx:6:8
Type error: 'Link' cannot be used as a JSX component.
  Its type '{ <RouteType>(props: LinkProps<RouteType>): Element; <RouteType>(props: LinkProps<RouteType>): Element; }' is not a valid JSX element type.
    Type '{ <RouteType>(props: LinkProps<RouteType>): Element; <RouteType>(props: LinkProps<RouteType>): Element; }' is not assignable to type '(props: any) => ReactNode | Promise<ReactNode>'.
      Type 'Element' is not assignable to type 'ReactNode | Promise<ReactNode>'.
        Property 'children' is missing in type 'ReactElement<any, any>' but required in type 'ReactPortal'.

  4 |   return (
  5 |     <div>
> 6 |       <Link href="/">Home</Link>
    |        ^
  7 |     </div>
  8 |   );
  9 | }
Next.js build worker exited with code: 1 and signal: null
 ELIFECYCLE  Command failed with exit code 1.

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0
Binaries:
  Node: 20.17.0
  npm: 10.8.2
  Yarn: 1.22.22
  pnpm: 9.10.0
Relevant Packages:
  next: 16.0.3
  eslint-config-next: 16.0.3
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.2.0
Next.js Config:
  typedRoutes: true