npm - @intlayer/docs - Versions diffs - 6.1.4 → 6.1.6-canary.0 - Mend

@intlayer/docs 6.1.4 → 6.1.6-canary.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (75) hide show

package/blog/ar/next-i18next_vs_next-intl_vs_intlayer.md +1366 -75
package/blog/ar/nextjs-multilingual-seo-comparison.md +364 -0
package/blog/de/next-i18next_vs_next-intl_vs_intlayer.md +1288 -72
package/blog/de/nextjs-multilingual-seo-comparison.md +362 -0
package/blog/en/intlayer_with_next-i18next.mdx +431 -0
package/blog/en/intlayer_with_next-intl.mdx +335 -0
package/blog/en/next-i18next_vs_next-intl_vs_intlayer.md +583 -336
package/blog/en/nextjs-multilingual-seo-comparison.md +360 -0
package/blog/en-GB/next-i18next_vs_next-intl_vs_intlayer.md +1144 -37
package/blog/en-GB/nextjs-multilingual-seo-comparison.md +360 -0
package/blog/es/next-i18next_vs_next-intl_vs_intlayer.md +1236 -64
package/blog/es/nextjs-multilingual-seo-comparison.md +363 -0
package/blog/fr/next-i18next_vs_next-intl_vs_intlayer.md +1142 -75
package/blog/fr/nextjs-multilingual-seo-comparison.md +362 -0
package/blog/hi/nextjs-multilingual-seo-comparison.md +363 -0
package/blog/it/next-i18next_vs_next-intl_vs_intlayer.md +1130 -55
package/blog/it/nextjs-multilingual-seo-comparison.md +363 -0
package/blog/ja/next-i18next_vs_next-intl_vs_intlayer.md +1150 -76
package/blog/ja/nextjs-multilingual-seo-comparison.md +362 -0
package/blog/ko/next-i18next_vs_next-intl_vs_intlayer.md +1139 -73
package/blog/ko/nextjs-multilingual-seo-comparison.md +362 -0
package/blog/pt/next-i18next_vs_next-intl_vs_intlayer.md +1143 -76
package/blog/pt/nextjs-multilingual-seo-comparison.md +362 -0
package/blog/ru/next-i18next_vs_next-intl_vs_intlayer.md +1150 -74
package/blog/ru/nextjs-multilingual-seo-comparison.md +370 -0
package/blog/tr/next-i18next_vs_next-intl_vs_intlayer.md +2 -0
package/blog/tr/nextjs-multilingual-seo-comparison.md +362 -0
package/blog/zh/next-i18next_vs_next-intl_vs_intlayer.md +1152 -75
package/blog/zh/nextjs-multilingual-seo-comparison.md +394 -0
package/dist/cjs/generated/blog.entry.cjs +16 -0
package/dist/cjs/generated/blog.entry.cjs.map +1 -1
package/dist/cjs/generated/docs.entry.cjs +16 -0
package/dist/cjs/generated/docs.entry.cjs.map +1 -1
package/dist/esm/generated/blog.entry.mjs +16 -0
package/dist/esm/generated/blog.entry.mjs.map +1 -1
package/dist/esm/generated/docs.entry.mjs +16 -0
package/dist/esm/generated/docs.entry.mjs.map +1 -1
package/dist/types/generated/blog.entry.d.ts +1 -0
package/dist/types/generated/blog.entry.d.ts.map +1 -1
package/dist/types/generated/docs.entry.d.ts +1 -0
package/dist/types/generated/docs.entry.d.ts.map +1 -1
package/docs/ar/component_i18n.md +186 -0
package/docs/ar/vs_code_extension.md +48 -109
package/docs/de/component_i18n.md +186 -0
package/docs/de/vs_code_extension.md +46 -107
package/docs/en/component_i18n.md +186 -0
package/docs/en/interest_of_intlayer.md +2 -2
package/docs/en/intlayer_with_nextjs_14.md +18 -1
package/docs/en/intlayer_with_nextjs_15.md +18 -1
package/docs/en/vs_code_extension.md +24 -114
package/docs/en-GB/component_i18n.md +186 -0
package/docs/en-GB/vs_code_extension.md +42 -103
package/docs/es/component_i18n.md +182 -0
package/docs/es/vs_code_extension.md +53 -114
package/docs/fr/component_i18n.md +186 -0
package/docs/fr/vs_code_extension.md +50 -111
package/docs/hi/component_i18n.md +186 -0
package/docs/hi/vs_code_extension.md +49 -110
package/docs/it/component_i18n.md +186 -0
package/docs/it/vs_code_extension.md +50 -111
package/docs/ja/component_i18n.md +186 -0
package/docs/ja/vs_code_extension.md +50 -111
package/docs/ko/component_i18n.md +186 -0
package/docs/ko/vs_code_extension.md +48 -109
package/docs/pt/component_i18n.md +186 -0
package/docs/pt/vs_code_extension.md +46 -107
package/docs/ru/component_i18n.md +186 -0
package/docs/ru/vs_code_extension.md +48 -109
package/docs/tr/component_i18n.md +186 -0
package/docs/tr/vs_code_extension.md +54 -115
package/docs/zh/component_i18n.md +186 -0
package/docs/zh/vs_code_extension.md +51 -105
package/package.json +11 -11
package/src/generated/blog.entry.ts +16 -0
package/src/generated/docs.entry.ts +16 -0

package/blog/en-GB/nextjs-multilingual-seo-comparison.md ADDED Viewed

@@ -0,0 +1,360 @@
+---
+createdAt: 2025-09-28
+updatedAt: 2025-09-28
+title: SEO and i18n in Next.js
+description: Learn how to set up multilingual SEO in your Next.js app using next-intl, next-i18next, and Intlayer.
+keywords:
+  - Intlayer
+  - SEO
+  - Internationalization
+  - Next.js
+  - i18n
+  - JavaScript
+  - React
+  - next-intl
+  - next-i18next
+slugs:
+  - blog
+  - blog-seo-i18n-nextjs
+---
+# SEO and i18n in Next.js: Translating is not enough
+When developers think about internationalization (i18n), the first reflex is often: _translate the content_. But people usually forget that the main goal of internationalization is to make your website more visible to the world.
+If your multilingual Next.js app doesn’t tell search engines how to crawl and understand your different language versions, most of your effort may go unnoticed.
+In this blog, we’ll explore **why i18n is an SEO superpower** and how to implement it correctly in Next.js with `next-intl`, `next-i18next`, and `Intlayer`.
+---
+## Why SEO and i18n
+Adding languages isn’t just about UX. It’s also a powerful lever for **organic visibility**. Here’s why:
+1. **Better discoverability:** Search engines index localized versions and rank them for users searching in their native language.
+2. **Avoid duplicate content:** Proper canonical and alternate tags tell crawlers which page belongs to which locale.
+3. **Better UX:** Visitors land on the right version of your site immediately.
+4. **Competitive advantage:** Few sites implement multilingual SEO well which means you can stand out.
+---
+## Best Practices for Multilingual SEO in Next.js
+Here’s a checklist every multilingual app should implement:
+- **Set `hreflang` meta tags in `<head>`**
+  Helps Google understand which versions exist for each language.
+- **List all translated pages in `sitemap.xml`**
+  Use the `xhtml` schema so crawlers can find alternates easily.
+- **Exclude private/localized routes in `robots.txt`**
+  e.g. don’t let `/dashboard`, `/fr/dashboard`, `/es/dashboard` be indexed.
+- **Use localized links**
+  Example: `<a href="/fr/about">À propos</a>` instead of linking to the default `/about`.
+These are simple steps — but skipping them can cost you visibility.
+---
+## Implementation Examples
+Developers often forget to properly reference their pages across locales so let’s look at how this works in practice with different libraries.
+### **next-intl**
+<Tabs>
+  <TabItem label="next-intl">
+```tsx fileName="src/app/[locale]/about/layout.tsx
+import type { Metadata } from "next";
+import { locales, defaultLocale } from "@/i18n";
+import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
+function localizedPath(locale: string, path: string) {
+  return locale === defaultLocale ? path : `/${locale}${path}`;
+}
+export async function generateMetadata({
+  params,
+}: {
+  params: { locale: string };
+}): Promise<Metadata> {
+  const { locale } = params;
+  const t = await getTranslations({ locale, namespace: "about" });
+  const url = "/about";
+  const languages = Object.fromEntries(
+    locales.map((l) => [l, localizedPath(l, url)])
+  );
+  return {
+    title: t("title"),
+    description: t("description"),
+    alternates: {
+      canonical: localizedPath(locale, url),
+      languages: { ...languages, "x-default": url },
+    },
+  };
+}
+// ... Rest of the page code
+```
+```tsx fileName="src/app/sitemap.ts"
+import type { MetadataRoute } from "next";
+import { locales, defaultLocale } from "@/i18n";
+const origin = "https://example.com";
+const formatterLocalizedPath = (locale: string, path: string) =>
+  locale === defaultLocale ? `${origin}${path}` : `${origin}/${locale}${path}`;
+export default function sitemap(): MetadataRoute.Sitemap {
+  const aboutLanguages = Object.fromEntries(
+    locales.map((l) => [l, formatterLocalizedPath(l, "/about")])
+  );
+  return [
+    {
+      url: formatterLocalizedPath(defaultLocale, "/about"),
+      lastModified: new Date(),
+      changeFrequency: "monthly",
+      priority: 0.7,
+      alternates: { languages: aboutLanguages },
+    },
+  ];
+}
+```
+```tsx fileName="src/app/robots.ts"
+import type { MetadataRoute } from "next";
+import { locales, defaultLocale } from "@/i18n";
+const origin = "https://example.com";
+const withAllLocales = (path: string) => [
+  path,
+  ...locales.filter((l) => l !== defaultLocale).map((l) => `/${l}${path}`),
+];
+export default function robots(): MetadataRoute.Robots {
+  const disallow = [
+    ...withAllLocales("/dashboard"),
+    ...withAllLocales("/admin"),
+  ];
+  return {
+    rules: { userAgent: "*", allow: ["/"], disallow },
+    host: origin,
+    sitemap: `${origin}/sitemap.xml`,
+  };
+}
+```
+### **next-i18next**
+  </TabItem>
+  <TabItem label="next-i18next">
+```ts fileName="i18n.config.ts"
+export const locales = ["en", "fr"] as const;
+export type Locale = (typeof locales)[number];
+export const defaultLocale: Locale = "en";
+/** Prefix path with locale unless it's the default locale */
+export function localizedPath(locale: string, path: string) {
+  return locale === defaultLocale ? path : `/${locale}${path}`;
+}
+/** Absolute URL helper */
+const ORIGIN = "https://example.com";
+export function abs(locale: string, path: string) {
+  return `${ORIGIN}${localizedPath(locale, path)}`;
+}
+```
+```tsx fileName="src/app/[locale]/about/layout.tsx"
+import type { Metadata } from "next";
+import { locales, defaultLocale, localizedPath } from "@/i18n.config";
+export async function generateMetadata({
+  params,
+}: {
+  params: { locale: string };
+}): Promise<Metadata> {
+  const { locale } = params;
+  // Dynamically import the correct JSON file
+  const messages = (await import(`@/../public/locales/${locale}/about.json`))
+    .default;
+  const languages = Object.fromEntries(
+    locales.map((l) => [l, localizedPath(l, "/about")])
+  );
+  return {
+    title: messages.title,
+    description: messages.description,
+    alternates: {
+      canonical: localizedPath(locale, "/about"),
+      languages: { ...languages, "x-default": "/about" },
+    },
+  };
+}
+export default async function AboutPage() {
+  return <h1>About</h1>;
+}
+```
+```ts fileName="src/app/sitemap.ts"
+import type { MetadataRoute } from "next";
+import { locales, defaultLocale, abs } from "@/i18n.config";
+export default function sitemap(): MetadataRoute.Sitemap {
+  const languages = Object.fromEntries(
+    locales.map((l) => [l, abs(l, "/about")])
+  );
+  return [
+    {
+      url: abs(defaultLocale, "/about"),
+      lastModified: new Date(),
+      changeFrequency: "monthly",
+      priority: 0.7,
+      alternates: { languages },
+    },
+  ];
+}
+```
+```ts fileName="src/app/robots.ts"
+import type { MetadataRoute } from "next";
+import { locales, defaultLocale, localizedPath } from "@/i18n.config";
+const ORIGIN = "https://example.com";
+const expandAllLocales = (path: string) => [
+  localizedPath(defaultLocale, path),
+  ...locales
+    .filter((l) => l !== defaultLocale)
+    .map((l) => localizedPath(l, path)),
+];
+export default function robots(): MetadataRoute.Robots {
+  const disallow = [
+    ...expandAllLocales("/dashboard"),
+    ...expandAllLocales("/admin"),
+  ];
+  return {
+    rules: { userAgent: "*", allow: ["/"], disallow },
+    host: ORIGIN,
+    sitemap: `${ORIGIN}/sitemap.xml`,
+  };
+}
+```
+### **Intlayer**
+  </TabItem>
+  <TabItem label="intlayer">
+````typescript fileName="src/app/[locale]/about/layout.tsx"
+import { getIntlayer, getMultilingualUrls } from "intlayer";
+import type { Metadata } from "next";
+import type { LocalPromiseParams } from "next-intlayer";
+export const generateMetadata = async ({
+  params,
+}: LocalPromiseParams): Promise<Metadata> => {
+  const { locale } = await params;
+  const metadata = getIntlayer("page-metadata", locale);
+  /**
+   * Generates an object containing all url for each locale.
+   *
+   * Example:
+   * ```ts
+   *  getMultilingualUrls('/about');
+   *
+   *  // Returns
+   *  // {
+   *  //   en: '/about',
+   *  //   fr: '/fr/about',
+   *  //   es: '/es/about',
+   *  // }
+   * ```
+   */
+  const multilingualUrls = getMultilingualUrls("/about");
+  return {
+    ...metadata,
+    alternates: {
+      canonical: multilingualUrls[locale as keyof typeof multilingualUrls],
+      languages: { ...multilingualUrls, "x-default": "/about" },
+    },
+  };
+};
+// ... Rest of the page code
+````
+```tsx fileName="src/app/sitemap.ts"
+import { getMultilingualUrls } from "intlayer";
+import type { MetadataRoute } from "next";
+const sitemap = (): MetadataRoute.Sitemap => [
+  {
+    url: "https://example.com/about",
+    alternates: {
+      languages: { ...getMultilingualUrls("https://example.com/about") },
+    },
+  },
+];
+```
+```tsx fileName="src/app/robots.ts"
+import { getMultilingualUrls } from "intlayer";
+import type { MetadataRoute } from "next";
+const getAllMultilingualUrls = (urls: string[]) =>
+  urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);
+const robots = (): MetadataRoute.Robots => ({
+  rules: {
+    userAgent: "*",
+    allow: ["/"],
+    disallow: getAllMultilingualUrls(["/dashboard"]),
+  },
+  host: "https://example.com",
+  sitemap: `https://example.com/sitemap.xml`,
+});
+export default robots;
+```
+> Intlayer provides a `getMultilingualUrls` function to generate multilingual URLs for your sitemap.
+  </TabItem>
+</Tabs>
+---
+## Conclusion
+Getting i18n right in Next.js isn’t just about translating text, it’s about making sure search engines and users know exactly which version of your content to serve.
+Setting up hreflang, sitemaps, and robots rules is what turns translations into real SEO value.
+While next-intl and next-i18next give you solid ways to wire this up, they usually require a lot of manual setup to keep things consistent across locales.
+This is where Intlayer really shines:
+It comes with built-in helpers like getMultilingualUrls, making hreflang, sitemap, and robots integration almost effortless.
+Metadata stays centralized instead of scattered across JSON files or custom utilities.
+It’s designed for Next.js from the ground up, so you spend less time debugging config and more time shipping.
+If your goal is not just to translate but to scale multilingual SEO without friction, Intlayer gives you the cleanest, most future-proof setup.