Skills
.Work. You
Rest

nextjs-nextintl-localized-link

Community

Fix locale routing with localized Next.js Link.

Software Engineering#routing#localization#nextjs#i18n#next-intl#internal-navigation
AuthorHankanman
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: nextjs-nextintl-localized-link
Download link: https://github.com/Hankanman/claude-config/archive/main.zip#nextjs-nextintl-localized-link

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.