split out navigation apis in examples

examples/example-app-router-migration/src/app/[locale]/page.tsx

@@ -1,7 +1,7 @@
 import {useLocale, useTranslations} from 'next-intl';
 import LocaleSwitcher from '@/components/LocaleSwitcher';
 import PageLayout from '@/components/PageLayout';
-import {Link} from '@/i18n/routing';
+import {Link} from '@/i18n/navigation';
 
 export default function Index() {
   const t = useTranslations('Index');

examples/example-app-router-migration/src/i18n/navigation.ts

@@ -0,0 +1,5 @@
+import {createNavigation} from 'next-intl/navigation';
+import {routing} from './routing';
+
+export const {Link, redirect, usePathname, useRouter} =
+  createNavigation(routing);

examples/example-app-router-migration/src/i18n/routing.ts

@@ -1,10 +1,6 @@
-import {createNavigation} from 'next-intl/navigation';
 import {defineRouting} from 'next-intl/routing';
 
 export const routing = defineRouting({
   locales: ['en', 'de'],
   defaultLocale: 'en'
 });
-
-export const {Link, redirect, usePathname, useRouter} =
-  createNavigation(routing);

examples/example-app-router-mixed-routing/README.md

@@ -11,7 +11,7 @@ An example of how to achieve locale prefixes on public routes while reading the
 
 1. [`src/middleware.ts`](./src/middleware.ts): Only run middleware on public pages that need to be localized.
 2. [`src/i18n/request.ts`](./src/i18n/request.ts): Use the locale from the pathname segment for public routes or return a locale from the user profile for internal app routes.
-3. [`src/i18n/routing.public.ts`](./src/i18n/routing.public.ts): These are the navigation APIs that automatically consider the `[locale]` segment for public routes. For internal app routes, the navigation APIs from Next.js should be used directly (see `PublicNavigation.tsx` vs `AppNavigation.tsx`).
+3. [`src/i18n/navigation.public.ts`](./src/i18n/navigation.public.ts): These are the navigation APIs that automatically consider the `[locale]` segment for public routes. For internal app routes, the navigation APIs from Next.js should be used directly (see `PublicNavigation.tsx` vs `AppNavigation.tsx`).
 
 Note that while this approach works fine, you can alternatively also consider a monorepo setup and build the public and internal app separately if you'd like to separate the code for the two apps.
 

examples/example-app-router-mixed-routing/src/app/(public)/[locale]/NavLink.tsx

@@ -2,7 +2,7 @@
 
 import {useSelectedLayoutSegment} from 'next/navigation';
 import {ComponentProps} from 'react';
-import {Link} from '@/i18n/routing.public';
+import {Link} from '@/i18n/navigation.public';
 
 export default function NavLink({href, ...rest}: ComponentProps<typeof Link>) {
   const selectedLayoutSegment = useSelectedLayoutSegment();

examples/example-app-router-mixed-routing/src/app/(public)/[locale]/PublicNavigationLocaleSwitcher.tsx

@@ -2,7 +2,7 @@
 
 import {useLocale} from 'next-intl';
 import {Locale} from '@/config';
-import {Link, usePathname} from '@/i18n/routing.public';
+import {Link, usePathname} from '@/i18n/navigation.public';
 
 export default function PublicNavigationLocaleSwitcher() {
   return (

examples/example-app-router-mixed-routing/src/i18n/navigation.public.ts

@@ -0,0 +1,5 @@
+import {createNavigation} from 'next-intl/navigation';
+import {routing} from './routing.public';
+
+// Should only be used on public routes in the `[locale]` segment
+export const {Link, usePathname} = createNavigation(routing);

examples/example-app-router-mixed-routing/src/i18n/routing.public.ts

@@ -1,11 +1,7 @@
-import {createNavigation} from 'next-intl/navigation';
 import {defineRouting} from 'next-intl/routing';
 import {defaultLocale, locales} from '../config';
 
 export const routing = defineRouting({
   locales,
   defaultLocale
 });
-
-// Should only be used on public routes in the `[locale]` segment
-export const {Link, usePathname} = createNavigation(routing);

examples/example-app-router-next-auth/src/components/LocaleSwitcher.tsx

@@ -1,5 +1,5 @@
 import {useLocale, useTranslations} from 'next-intl';
-import {Link, usePathname} from '@/i18n/routing';
+import {Link, usePathname} from '@/i18n/navigation';
 
 export default function LocaleSwitcher() {
   const t = useTranslations('LocaleSwitcher');

examples/example-app-router-next-auth/src/i18n/navigation.ts

@@ -0,0 +1,5 @@
+import {createNavigation} from 'next-intl/navigation';
+import {routing} from './routing';
+
+export const {Link, redirect, usePathname, useRouter} =
+  createNavigation(routing);

examples/example-app-router-next-auth/src/i18n/routing.ts

@@ -1,11 +1,7 @@
-import {createNavigation} from 'next-intl/navigation';
 import {defineRouting} from 'next-intl/routing';
 
 export const routing = defineRouting({
   locales: ['en', 'de'],
   defaultLocale: 'en',
   localePrefix: 'as-needed'
 });
-
-export const {Link, redirect, usePathname, useRouter} =
-  createNavigation(routing);

examples/example-app-router-playground/src/app/[locale]/client/ClientContent.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import {useFormatter, useLocale, useNow, useTimeZone} from 'next-intl';
-import {Link, usePathname} from '@/i18n/routing';
+import {Link, usePathname} from '@/i18n/navigation';
 
 export default function ClientContent() {
   const now = useNow();

examples/example-app-router-playground/src/app/[locale]/client/redirect/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import {useLocale} from 'next-intl';
-import {redirect} from '@/i18n/routing';
+import {redirect} from '@/i18n/navigation';
 
 export default function ClientRedirectPage() {
   const locale = useLocale();

examples/example-app-router-playground/src/app/[locale]/nested/UnlocalizedPathname.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import {usePathname} from '@/i18n/routing';
+import {usePathname} from '@/i18n/navigation';
 
 export default function UnlocalizedPathname() {
   return <p data-testid="UnlocalizedPathname">{usePathname()}</p>;

examples/example-app-router-playground/src/app/[locale]/news/[articleId]/page.tsx

@@ -1,7 +1,8 @@
 import {Metadata} from 'next';
 import {useTranslations} from 'next-intl';
 import {use} from 'react';
-import {Locale, getPathname} from '@/i18n/routing';
+import {Locale} from '@/i18n/routing';
+import {getPathname} from '@/i18n/navigation';
 
 type Props = {
   params: Promise<{

examples/example-app-router-playground/src/app/[locale]/page.tsx

@@ -3,7 +3,7 @@ import {useFormatter, useNow, useTimeZone, useTranslations} from 'next-intl';
 import {use} from 'react';
 import DropdownMenu from '@/components/DropdownMenu';
 import RichText from '@/components/RichText';
-import {Link} from '@/i18n/routing';
+import {Link} from '@/i18n/navigation';
 import AsyncComponent from '../../components/AsyncComponent';
 import AsyncComponentWithNamespaceAndLocale from '../../components/AsyncComponentWithNamespaceAndLocale';
 import AsyncComponentWithoutNamespace from '../../components/AsyncComponentWithoutNamespace';

examples/example-app-router-playground/src/app/[locale]/redirect/page.tsx

@@ -1,5 +1,5 @@
 import {useLocale} from 'next-intl';
-import {redirect} from '@/i18n/routing';
+import {redirect} from '@/i18n/navigation';
 
 export default function Redirect() {
   const locale = useLocale();

examples/example-app-router-playground/src/components/ClientLink.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import {ComponentProps} from 'react';
-import {Link} from '@/i18n/routing';
+import {Link} from '@/i18n/navigation';
 
 export default function NavigationLink(props: ComponentProps<typeof Link>) {
   return <Link {...props} />;

examples/example-app-router-playground/src/components/ClientRouterWithoutProvider.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import {useRouter} from '@/i18n/routing';
+import {useRouter} from '@/i18n/navigation';
 
 export default function ClientRouterWithoutProvider() {
   const router = useRouter();

examples/example-app-router-playground/src/components/DropdownMenu.tsx

@@ -1,5 +1,5 @@
 import * as Dropdown from '@radix-ui/react-dropdown-menu';
-import {Link as NextIntlLink} from '@/i18n/routing';
+import {Link as NextIntlLink} from '@/i18n/navigation';
 
 export default function DropdownMenu() {
   return (

examples/example-app-router-playground/src/components/LocaleSwitcher.tsx

@@ -1,5 +1,5 @@
 import {useLocale, useTranslations} from 'next-intl';
-import {Link} from '@/i18n/routing';
+import {Link} from '@/i18n/navigation';
 
 export default function LocaleSwitcher() {
   const t = useTranslations('LocaleSwitcher');

examples/example-app-router-playground/src/components/NavigationLink.tsx

@@ -2,7 +2,7 @@
 
 import {useSelectedLayoutSegment} from 'next/navigation';
 import {ComponentProps} from 'react';
-import {Link} from '@/i18n/routing';
+import {Link} from '@/i18n/navigation';
 
 export default function NavigationLink({
   href,

examples/example-app-router-playground/src/i18n/navigation.ts

@@ -0,0 +1,5 @@
+import {createNavigation} from 'next-intl/navigation';
+import {routing} from './routing';
+
+export const {Link, getPathname, redirect, usePathname, useRouter} =
+  createNavigation(routing);

examples/example-app-router-playground/src/i18n/routing.ts

@@ -1,4 +1,3 @@
-import {createNavigation} from 'next-intl/navigation';
 import {defineRouting} from 'next-intl/routing';
 
 export const routing = defineRouting({
@@ -62,6 +61,3 @@ export const routing = defineRouting({
 
 export type Pathnames = keyof typeof routing.pathnames;
 export type Locale = (typeof routing.locales)[number];
-
-export const {Link, getPathname, redirect, usePathname, useRouter} =
-  createNavigation(routing);

examples/example-app-router/src/app/sitemap.ts

@@ -1,6 +1,7 @@
 import {MetadataRoute} from 'next';
 import {host} from '@/config';
-import {Locale, getPathname, routing} from '@/i18n/routing';
+import {routing, Locale} from '@/i18n/routing';
+import {getPathname} from '@/i18n/navigation';
 
 export default function sitemap(): MetadataRoute.Sitemap {
   return [getEntry('/'), getEntry('/pathnames')];

examples/example-app-router/src/components/LocaleSwitcherSelect.tsx

@@ -3,7 +3,8 @@
 import clsx from 'clsx';
 import {useParams} from 'next/navigation';
 import {ChangeEvent, ReactNode, useTransition} from 'react';
-import {Locale, usePathname, useRouter} from '@/i18n/routing';
+import {Locale} from '@/i18n/routing';
+import {usePathname, useRouter} from '@/i18n/navigation';
 
 type Props = {
   children: ReactNode;

examples/example-app-router/src/components/NavigationLink.tsx

@@ -3,7 +3,7 @@
 import clsx from 'clsx';
 import {useSelectedLayoutSegment} from 'next/navigation';
 import {ComponentProps} from 'react';
-import {Link} from '@/i18n/routing';
+import {Link} from '@/i18n/navigation';
 
 export default function NavigationLink({
   href,

examples/example-app-router/src/i18n/navigation.ts

@@ -0,0 +1,5 @@
+import {createNavigation} from 'next-intl/navigation';
+import {routing} from './routing';
+
+export const {Link, getPathname, redirect, usePathname, useRouter} =
+  createNavigation(routing);

examples/example-app-router/src/i18n/routing.ts

@@ -1,4 +1,3 @@
-import {createNavigation} from 'next-intl/navigation';
 import {defineRouting} from 'next-intl/routing';
 
 export const routing = defineRouting({
@@ -15,6 +14,3 @@ export const routing = defineRouting({
 
 export type Pathnames = keyof typeof routing.pathnames;
 export type Locale = (typeof routing.locales)[number];
-
-export const {Link, getPathname, redirect, usePathname, useRouter} =
-  createNavigation(routing);