experimental.typedRoutes with Turbopack

[karlhorky]

Goals

1. Support parity with webpack support for experimental.typedRoutes

Non-Goals

--

Background

This is a feature request tracking issue and followup to the comments / issues talking about experimental.typedRoutes with Turbopack:

• [NextJS 14] Cannot use experimental.typedRoutes with --turbo #57790
  • @Audrey-Ann "experimental.typedRoutes is not supported"
• Missing next dev --turbo features #49174 (comment)
  • @pawelblaszczyk5 "Any plans for experimental.typedRoutes in turbo?"
  • @timneutkens "Eventually, yes"

Proposal

Support experimental.typedRoutes with Turbopack dev server

cc @shuding

[antoinerousseau]

Hi, any news about this? That would be great to have it :)

[grmkris]

👀

turbo is now stable in dev, typed routes are quite nice to work with

hopefully we can get this soon?

[tjx666]

My personal script has better ux.

I use following code to generate env types:

/**
 * Auto generate environment.d.ts by .env.local
 */
import '@/scripts/checkCwd';

import { readFile, writeFile } from 'fs/promises';
import { resolve } from 'path';

import { $ } from 'execa';

async function parseEnvFile(filePath: string): Promise<Array<[string, string, string | null]>> {
    const content = await readFile(filePath, 'utf8');
    const lines = content.split('\n');
    const result: Array<[string, string, string | null]> = [];
    let lastComment: string | null = null;

    for (const line of lines) {
        const trimmedLine = line.trim();
        if (trimmedLine.startsWith('#')) {
            lastComment = trimmedLine.slice(1).trim();
        } else if (trimmedLine.includes('=')) {
            const [key, value] = trimmedLine.split('=').map((part) => part.trim());
            result.push([key, value.replaceAll(/^['"]|['"]$/g, ''), lastComment]);
            lastComment = null;
        }
    }

    return result;
}

const envEntries = await parseEnvFile(resolve('.env.local'));

const indent = ' '.repeat(4);
const envs = envEntries
    .map(([key, value, comment]) => {
        const commentBlockLines = [
            '/**',
            comment ? ` * ${comment}` : '',
            comment ? ' *' : '',
            ' * @example',
            ` *     '${value}'`,
            ' */',
        ];
        const commentBlock = commentBlockLines
            .filter(Boolean)
            .map((line) => indent.repeat(3) + line)
            .join('\n');
        return `${commentBlock}\n${indent.repeat(3)}${key}: string;`;
    })
    .join('\n\n');

const content = `/**
 * !: DON'T EDIT THIS FILE MANUALLY
 *
 * Auto generate by scripts/updateEnvDts.ts
 */

import Next from 'next'

declare global {
    namespace NodeJS {
        interface ProcessEnv {
${envs}
        }
    }
}
`;

await writeFile(resolve('typings/environment.d.ts'), content);
await $`prettier --write typings/environment.d.ts`;

result:

/**
 * !: DON'T EDIT THIS FILE MANUALLY
 *
 * Auto generate by scripts/updateEnvDts.ts
 */

import Next from 'next';

declare global {
    namespace NodeJS {
        interface ProcessEnv {
            /**
             * Clerk Auth
             *
             * @example
             *     '/sign-in';
             */
            NEXT_PUBLIC_CLERK_SIGN_IN_URL: string;

            /**
             * @example
             *     '/sign-up';
             */
            NEXT_PUBLIC_CLERK_SIGN_UP_URL: string;

            /**
             * @example
             *     'pk_************************************Q';
             */
            NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: string;

            /**
             * @example
             *     'sk_************************************i';
             */
            CLERK_SECRET_KEY: string;

            /**
             * FAL API
             *
             * @example
             *     'ab_************************************8';
             */
            FAL_KEY: string;

            /**
             * Neon Postgres
             *
             * @example
             *     'pg_************************************e';
             */
            DATABASE_URL: string;

            /**
             * https://dash.cloudflare.com/c9a6a0fa818553a00efc0d8e5/r2/api-tokens
             *
             * @example
             *     'cf_************************************j';
             */
            R2_TOKEN: string;

            /**
             * @example
             *     'r2_************************************0';
             */
            R2_ACCESS_KEY_ID: string;

            /**
             * @example
             *     'sk_************************************f';
             */
            R2_SECRET_ACCESS_KEY: string;
        }
    }
}

[johanneskares]

This is my very clunky workaround. I added this to scripts in package.json

{
    "dev": "bun run delete-typed-routes && next dev --turbopack",
    "build": "bun run add-typed-routes && bun run next build --no-lint",
    "add-typed-routes": "grep -qxF '        typedRoutes: true,' next.config.js || (sed -i.bak '5s/^/        typedRoutes: true,\n/' next.config.js && rm -f next.config.js.bak)",
    "delete-typed-routes": "sed -i.bak '/typedRoutes: true/d' next.config.js && rm -f next.config.js.bak"
}

It basically disables type checking for the dev build, but I still get errors during build phase.

[karlhorky]

Ah yeah, something like that is what I was thinking over here:

• https://twitter.com/karlhorky/status/1846506414233067993

Indeed a bit hacky, but maybe a good option until Turbopack support.

[javascripter]

You can use environment variables instead without modifying config files.

next.config.ts

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    typedRoutes: ['1', 'true'].includes(process.env.TYPED_ROUTES ?? ''),
  },
}

export default nextConfig

Then,

TYPED_ROUTES=1 bun run build

bun run dev

[HashimMufti]

Gentle bump on this, would be great if we didn't have to hack around it!

[karlhorky]

[email protected] includes typedRoutes for Turbopack (thanks @bgub and reviewers! 🎉):

• Blog post: https://nextjs.org/blog/next-15-5
• Full release notes: https://github.com/vercel/next.js/releases/tag/v15.5.0

---

Looks like experimental.typedRoutes is coming to Turbopack in these PRs, thanks to @bgub 🔥 🚀

• feat: automatically generate route types #81396
• feat: type guard file generation #81400
• feat: Turbopack typed links #81528

[lanzclintonv]

Yeah, it dropped literally today. I can confirm that it's working client side.

Unfortunately, typedRoutes is still unavailable in redirect()

[bgub]

@lanzclintonv could you share more details? If there's an easy solution, I'll see what I can do. We do handle some cases of redirects...

[lanzclintonv]

@bgub sure. The type safe navigation doesn't work with redirect from next/navigation. The href in Link and router.push gives type safety.

I checked the repo and it seems redirect is fixed to the string type.

I'm not familiar with Next.js repo and haven't had the time yet. I guess the solution would be replacing the string type with the same type of href in Link and router.push() params. I'm in no way an expert on this so take it with a grain of salt.

[bgub]

@lanzclintonv just added support!

#82860

[lanzclintonv]

@bgub can confirm that redirect and permanentRedirect now has typedRoutes as of 15.5.1. Thanks for fixing this!