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