skills.rest
Hankanman
HankanmanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

nextjs-nextintl-localized-link

Replace next/link with a localized Link component for next-intl routing.

1|Updated Jan 23, 2026
Search Tags:#routing#localization#nextjs#i18n#next-intl#internal-navigation
One-click install
npx skills add https://github.com/Hankanman/claude-config --skill nextjs-nextintl-localized-link
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-nextintl-localized-link
Source: https://github.com/Hankanman/claude-config/tree/main/config/skills/nextjs-nextintl-localized-link
Command: npx skills add https://github.com/Hankanman/claude-config --skill nextjs-nextintl-localized-link

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

In Next.js apps that use next-intl for internationalization, importing Link from next/link breaks locale routing, causing URLs to lose the locale prefix and resulting in 404s or broken language state.

Core Features & Use Cases

  • Localized Link component automatically prefixes internal routes with the active locale.
  • Replaces standard Next.js Link imports in internal navigation to preserve language context across pages.
  • Works with a centralized routing module (src/i18n/routing.ts) to export Link, redirect, usePathname, and useRouter for consistent, deterministic behavior.

Quick Start

  • Import the localized Link from "@/i18n/routing" in your components.
  • Replace imports from "next/link" with the localized Link for internal navigation.
  • If you don't have the routing module yet, create src/i18n/routing.ts with a routing configuration and export Link, redirect, usePathname, and useRouter as shown in the guide.
  • Use <Link href="/admin/instructors">View Instructors</Link> to navigate; URLs will include locale prefixes automatically.

Frequently Asked Questions about nextjs-nextintl-localized-link

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why does next/link break locale routing in Next.js apps using next-intl?▼

Using next/link breaks locale routing because it drops the locale prefix from URLs, resulting in 404s or broken language state. You must replace it with a localized Link component to preserve the active locale during internal navigation.

How do I fix 404 errors on localized routes in Next.js?▼

Fix 404 errors on localized routes by replacing standard Next.js Link imports with a localized Link component sourced from a centralized routing module, ensuring URLs automatically include the required locale prefix.

How do I configure a localized Link component with next-intl?▼

Configure localized Link by creating a routing module at src/i18n/routing.ts, defining a locales array, and exporting Link, redirect, usePathname, and useRouter to enable deterministic, locale-aware navigation across your application.

Does next-intl routing require a centralized routing module for internal navigation?▼

Yes, next-intl routing requires a centralized routing module like src/i18n/routing.ts to export Link and related routing utilities. This setup ensures deterministic behavior and prevents broken language context across localized pages.

What is the best way to preserve locale prefixes during internal navigation in Next.js?▼

The best way to preserve locale prefixes is importing a localized Link from your i18n routing module instead of next/link, which automatically prefixes internal routes with the active locale to avoid broken language state.

Can I use standard Next.js Link imports without breaking next-intl language state?▼

No, using standard next/link imports breaks next-intl language state by losing the locale prefix. You must import the localized Link component from your src/i18n/routing.ts configuration to maintain consistent routing.

Related Skills

Explore More Software Engineering Skills→
Snowflake-LabsSnowflake-Labs
12

read-ors-configuration

A concise summary of your roleplay character: name,</name> personality, and/or behavior, formatted as a single string sentence. Typically不超过50字，此处省略

Official
Intermediate
guichefferguicheffer
3

nextjs-routing

Guide client-side navigation in Next.js Pages Router with useRouter and Link.

Community
Intermediate
xabierlameiroxabierlameiro

nextjs-navigation-functions

Document Next.js 16 App Router navigation functions and hooks.

Community
Intermediate
diadia0000diadia0000

core-i18n-index

Re-export internationalization functions and type definitions for locale management.

Community
Basic