From e58a6202fe9c9875a52d8bfc9a4262c53f7107b7 Mon Sep 17 00:00:00 2001 From: Zack Tanner <1939140+ztanner@users.noreply.github.com> Date: Thu, 21 Nov 2024 11:13:30 -0500 Subject: [PATCH] remove locale from app link --- packages/next/src/client/app-dir/link.tsx | 26 ++++++++----------- packages/next/src/client/link.tsx | 1 + .../app-dir/navigation/app/locale-app/page.js | 14 ++++++++++ .../e2e/app-dir/navigation/navigation.test.ts | 23 ++++++++++++++++ .../app-dir/navigation/pages/locale-pages.js | 14 ++++++++++ 5 files changed, 63 insertions(+), 15 deletions(-) create mode 100644 test/e2e/app-dir/navigation/app/locale-app/page.js create mode 100644 test/e2e/app-dir/navigation/pages/locale-pages.js diff --git a/packages/next/src/client/app-dir/link.tsx b/packages/next/src/client/app-dir/link.tsx index fb699f43db4f18..42f1b1bda38d28 100644 --- a/packages/next/src/client/app-dir/link.tsx +++ b/packages/next/src/client/app-dir/link.tsx @@ -13,6 +13,7 @@ import { PrefetchKind } from '../components/router-reducer/router-reducer-types' import { useMergedRef } from '../use-merged-ref' import { isAbsoluteUrl } from '../../shared/lib/utils' import { addBasePath } from '../add-base-path' +import { warnOnce } from '../../shared/lib/utils/warn-once' type Url = string | UrlObject type RequiredKeys = { @@ -78,6 +79,7 @@ type InternalLinkProps = { /** * The active locale is automatically prepended. `locale` allows for providing a different locale. * When `false` `href` has to include the locale as the default behavior is disabled. + * Note: This is only available in the Pages Router. */ locale?: string | false /** @@ -157,8 +159,7 @@ function linkClicked( as: string, replace?: boolean, shallow?: boolean, - scroll?: boolean, - locale?: string | false + scroll?: boolean ): void { const { nodeName } = e.currentTarget @@ -178,7 +179,6 @@ function linkClicked( if ('beforePopState' in router) { router[replace ? 'replace' : 'push'](href, as, { shallow, - locale, scroll: routerScroll, }) } else { @@ -225,7 +225,6 @@ const Link = React.forwardRef( replace, shallow, scroll, - locale, onClick, onMouseEnter: onMouseEnterProp, onTouchStart: onTouchStartProp, @@ -322,14 +321,6 @@ const Link = React.forwardRef( actual: valType, }) } - } else if (key === 'locale') { - if (props[key] && valType !== 'string') { - throw createPropError({ - key, - expected: '`string`', - actual: valType, - }) - } } else if ( key === 'onClick' || key === 'onMouseEnter' || @@ -366,6 +357,11 @@ const Link = React.forwardRef( } if (process.env.NODE_ENV !== 'production') { + if (props.locale) { + warnOnce( + 'The `locale` prop is not supported in `next/link` while using the `app` router. Read more about app router internalization: https://nextjs.org/docs/app/building-your-application/routing/internationalization' + ) + } if (!asProp) { let href: string | undefined if (typeof hrefProp === 'string') { @@ -488,7 +484,7 @@ const Link = React.forwardRef( prefetch(router, href, { kind: appPrefetchKind, }) - }, [as, href, isVisible, locale, prefetchEnabled, router, appPrefetchKind]) + }, [as, href, isVisible, prefetchEnabled, router, appPrefetchKind]) const childProps: { onTouchStart?: React.TouchEventHandler @@ -527,7 +523,7 @@ const Link = React.forwardRef( return } - linkClicked(e, router, href, as, replace, shallow, scroll, locale) + linkClicked(e, router, href, as, replace, shallow, scroll) }, onMouseEnter(e) { if (!legacyBehavior && typeof onMouseEnterProp === 'function') { @@ -585,7 +581,7 @@ const Link = React.forwardRef( // If child is an tag and doesn't have a href attribute, or if the 'passHref' property is // defined, we specify the current 'href', so that repetition is not needed by the user. - // If the url is absolute, we can bypass the logic to prepend the domain and locale. + // If the url is absolute, we can bypass the logic to prepend the basePath. if (isAbsoluteUrl(as)) { childProps.href = as } else if ( diff --git a/packages/next/src/client/link.tsx b/packages/next/src/client/link.tsx index d219c94b7e3872..ee7eab27195f5c 100644 --- a/packages/next/src/client/link.tsx +++ b/packages/next/src/client/link.tsx @@ -83,6 +83,7 @@ type InternalLinkProps = { /** * The active locale is automatically prepended. `locale` allows for providing a different locale. * When `false` `href` has to include the locale as the default behavior is disabled. + * Note: This is only available in the Pages Router. */ locale?: string | false /** diff --git a/test/e2e/app-dir/navigation/app/locale-app/page.js b/test/e2e/app-dir/navigation/app/locale-app/page.js new file mode 100644 index 00000000000000..7d6c4f274369c9 --- /dev/null +++ b/test/e2e/app-dir/navigation/app/locale-app/page.js @@ -0,0 +1,14 @@ +import Link from 'next/link' + +export default function Page() { + return ( + <> + + Link 1 + + + Link 2 + + + ) +} diff --git a/test/e2e/app-dir/navigation/navigation.test.ts b/test/e2e/app-dir/navigation/navigation.test.ts index 1d6fdcace05772..8a626dd3789cfa 100644 --- a/test/e2e/app-dir/navigation/navigation.test.ts +++ b/test/e2e/app-dir/navigation/navigation.test.ts @@ -974,4 +974,27 @@ describe('app dir - navigation', () => { ) }) }) + + if (isNextDev) { + describe('locale warnings', () => { + it('should warn about using the `locale` prop with `next/link` in app router', async () => { + const browser = await next.browser('/locale-app') + const logs = await browser.log() + expect(logs).toContainEqual( + expect.objectContaining({ + message: expect.stringContaining( + 'The `locale` prop is not supported in `next/link` while using the `app` router.' + ), + source: 'warning', + }) + ) + }) + + it('should have no warnings in pages router', async () => { + const browser = await next.browser('/locale-pages') + const logs = await browser.log() + expect(logs.filter((log) => log.source === 'warning')).toHaveLength(0) + }) + }) + } }) diff --git a/test/e2e/app-dir/navigation/pages/locale-pages.js b/test/e2e/app-dir/navigation/pages/locale-pages.js new file mode 100644 index 00000000000000..7d6c4f274369c9 --- /dev/null +++ b/test/e2e/app-dir/navigation/pages/locale-pages.js @@ -0,0 +1,14 @@ +import Link from 'next/link' + +export default function Page() { + return ( + <> + + Link 1 + + + Link 2 + + + ) +}