Next.js

Routing

This page explains how Routing is handled in a Next.js project.

This section builds upon the Next.js Quick Start and introduces Routing configuration.

Project Structure

myapp
src
app
[locale]
page.tsx
U
i18n
intor-config.ts
M
proxy.ts
U

Integration Steps

♯1 Create a Dynamic Route

Create a dynamic route directory [locale] under app/, and add a page.tsx file inside it.

The content of page.tsx can be reused directly from the Usage Example in the previous section, and is not repeated here.

[locale]
page.tsx
U

♯2 Apply Inbound Routing

Create proxy.ts under src/ and use createIntorHandler to intercept the request flow.

proxy.ts
U

src/proxy.ts
import { createIntorHandler } from "intor/next";
import { intorConfig } from "@/i18n/intor-config";

export const proxy = createIntorHandler(intorConfig);

export const config = {
  matcher: ["/((?!api|_next/static|_next/image).*)"],
};

♯3 Enable Routing Configuration

Enable Routing behavior in the configuration file.

See: Config/Routing

intor-config.ts
M

src/i18n/intor-config.ts
import { defineIntorConfig } from "intor/config";

export const intorConfig = defineIntorConfig({
  // ...
  routing: { localePrefix: "all" },
});

Once configured, incoming requests will be routed according to the defined Routing rules and resolved to the appropriate locale paths.

♯4 Using Navigation Tools

The following tools describe and execute locale-aware navigation behavior.
For their composition rules, see: Navigation Intent

<Link />

Based on Next.js next/link.

<Link href="/path" locale="en">English</Link>

useRouter

Based on Next.js useRouter.

const { push } = useRouter();
push("/path", { locale: "en" });

redirect

Based on Next.js redirect.

redirect(intorConfig, "/path", { locale: "en" });