docs: Add example and test for getPathname (#1258)

amannn · Aug 14, 2024 · 2a76acf · 2a76acf
1 parent bfa031c
commit 2a76acf
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 3 deletions.
diff --git a/examples/example-app-router-playground/src/app/[locale]/news/[articleId]/page.tsx b/examples/example-app-router-playground/src/app/[locale]/news/[articleId]/page.tsx
@@ -1,11 +1,31 @@
+import {Metadata} from 'next';
 import {useTranslations} from 'next-intl';
+import {defaultLocale, getPathname} from '@/navigation';
+import {Locale} from '@/types';
 
 type Props = {
   params: {
+    locale: Locale;
     articleId: string;
   };
 };
 
+export async function generateMetadata({params}: Props): Promise<Metadata> {
+  let canonical = getPathname({
+    href: {
+      pathname: '/news/[articleId]',
+      params: {articleId: params.articleId}
+    },
+    locale: params.locale
+  });
+
+  if (params.locale !== defaultLocale) {
+    canonical = '/' + params.locale + canonical;
+  }
+
+  return {alternates: {canonical}};
+}
+
 export default function NewsArticle({params}: Props) {
   const t = useTranslations('NewsArticle');
   return <h1>{t('title', {articleId: params.articleId})}</h1>;

diff --git a/examples/example-app-router-playground/src/middleware.ts b/examples/example-app-router-playground/src/middleware.ts
@@ -1,8 +1,8 @@
 import createMiddleware from 'next-intl/middleware';
-import {locales, pathnames, localePrefix} from './navigation';
+import {locales, pathnames, localePrefix, defaultLocale} from './navigation';
 
 export default createMiddleware({
-  defaultLocale: 'en',
+  defaultLocale,
   localePrefix,
   pathnames,
   locales

diff --git a/examples/example-app-router-playground/src/navigation.ts b/examples/example-app-router-playground/src/navigation.ts
@@ -3,6 +3,8 @@ import {LocalePrefix, Pathnames} from 'next-intl/routing';
 
 export const locales = ['en', 'de', 'es', 'ja'] as const;
 
+export const defaultLocale = 'en' as const;
+
 export const localePrefix = (
   process.env.NEXT_PUBLIC_LOCALE_PREFIX === 'never'
     ? 'never'
@@ -40,7 +42,7 @@ export const pathnames = {
   }
 } satisfies Pathnames<typeof locales>;
 
-export const {Link, redirect, usePathname, useRouter} =
+export const {Link, getPathname, redirect, usePathname, useRouter} =
   createLocalizedPathnamesNavigation({
     locales,
     localePrefix,

diff --git a/examples/example-app-router-playground/src/types.ts b/examples/example-app-router-playground/src/types.ts
@@ -0,0 +1,3 @@
+import {locales} from './navigation';
+
+export type Locale = (typeof locales)[number];
diff --git a/examples/example-app-router-playground/tests/main.spec.ts b/examples/example-app-router-playground/tests/main.spec.ts
@@ -682,6 +682,21 @@ it('supports custom prefixes', async ({page}) => {
   page.getByRole('heading', {name: 'Anidada'});
 });
 
+it('can use `getPahname` to define a canonical link', async ({page}) => {
+  async function getCanonicalPathname() {
+    const href = await page
+      .locator('link[rel="canonical"]')
+      .getAttribute('href');
+    return new URL(href!).pathname;
+  }
+
+  await page.goto('/news/3');
+  await expect(getCanonicalPathname()).resolves.toBe('/news/3');
+
+  await page.goto('/de/neuigkeiten/3');
+  await expect(getCanonicalPathname()).resolves.toBe('/de/neuigkeiten/3');
+});
+
 describe('server actions', () => {
   it('can use `getTranslations` in server actions', async ({page}) => {
     await page.goto('/actions');