@intlayer/docs 7.5.6 → 7.5.8

package/docs/pt/intlayer_with_nextjs_14.md

@@ -46,14 +46,22 @@ Instale os pacotes necessários usando npm:
 
 ```bash packageManager="npm"
 npm install intlayer next-intlayer
+npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer next-intlayer
+pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer next-intlayer
+yarn intlayer init
+```
+
+```bash packageManager="bun"
+bun add intlayer next-intlayer
+bunx intlayer init
 ```
 
 - **intlayer**
@@ -1231,14 +1239,22 @@ Para habilitar essa otimização, instale o pacote `@intlayer/swc`. Uma vez inst
 
 ```bash packageManager="npm"
 npm install @intlayer/swc --save-dev
+npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add @intlayer/swc --save-dev
+pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add @intlayer/swc --save-dev
+yarn intlayer init
+```
+
+```bash packageManager="bun"
+bun add @intlayer/swc --dev
+bunx intlayer init
 ```
 
 > Nota: Esta otimização só está disponível em Next.js 13 e superior.

package/docs/pt/intlayer_with_nextjs_15.md

@@ -53,14 +53,22 @@ Instale os pacotes necessários usando npm:
 
 ```bash packageManager="npm"
 npm install intlayer next-intlayer
+npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer next-intlayer
+pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer next-intlayer
+yarn intlayer init
+```
+
+```bash packageManager="bun"
+bun add intlayer next-intlayer
+bunx intlayer init
 ```
 
 - **intlayer**
@@ -1482,14 +1490,22 @@ Para habilitar essa otimização, instale o pacote `@intlayer/swc`. Uma vez inst
 
 ```bash packageManager="npm"
 npm install @intlayer/swc --save-dev
+npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add @intlayer/swc --save-dev
+pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add @intlayer/swc --save-dev
+yarn intlayer init
+```
+
+```bash packageManager="bun"
+bun add @intlayer/swc --dev
+bunx intlayer init
 ```
 
 > Nota: Esta otimização está disponível apenas para Next.js 13 e versões superiores.

package/docs/pt/intlayer_with_nextjs_16.md

@@ -73,14 +73,22 @@ Instale os pacotes necessários usando npm:
 
 ```bash packageManager="npm"
 npm install intlayer next-intlayer
+npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer next-intlayer
+pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer next-intlayer
+yarn intlayer init
+```
+
+```bash packageManager="bun"
+bun add intlayer next-intlayer
+bunx intlayer init
 ```
 
 - **intlayer**
@@ -1564,14 +1572,22 @@ Para ativar essa otimização, instale o pacote `@intlayer/swc`. Uma vez instala
 
 ```bash packageManager="npm"
 npm install @intlayer/swc --save-dev
+npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add @intlayer/swc --save-dev
+pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add @intlayer/swc --save-dev
+yarn intlayer init
+```
+
+```bash packageManager="bun"
+bun add @intlayer/swc --dev
+bunx intlayer init
 ```
 
 > Nota: Esta otimização está disponível apenas para Next.js 13 ou superior.

package/docs/pt/intlayer_with_nextjs_page_router.md

@@ -47,14 +47,22 @@ Instale os pacotes necessários usando seu gerenciador de pacotes preferido:
 
 ```bash packageManager="npm"
 npm install intlayer next-intlayer
+npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer next-intlayer
+pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer next-intlayer
+yarn intlayer init
+```
+
+```bash packageManager="bun"
+bun add intlayer next-intlayer
+bunx intlayer init
 ```
 
 - **intlayer**
@@ -1449,14 +1457,22 @@ Para ativar essa otimização, instale o pacote `@intlayer/swc`. Uma vez instala
 
 ```bash packageManager="npm"
 npm install @intlayer/swc --save-dev
+npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add @intlayer/swc --save-dev
+pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add @intlayer/swc --save-dev
+yarn intlayer init
+```
+
+```bash packageManager="bun"
+bun add @intlayer/swc --dev
+bunx intlayer init
 ```
 
 > Nota: Esta otimização está disponível apenas para Next.js 13 e versões superiores.

package/docs/pt/intlayer_with_nuxt.md

@@ -74,16 +74,25 @@ Instale os pacotes necessários usando npm:
 ```bash packageManager="npm"
 npm install intlayer vue-intlayer
 npm install --save-dev nuxt-intlayer
+npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer vue-intlayer
 pnpm add --save-dev nuxt-intlayer
+pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer vue-intlayer
 yarn add --save-dev nuxt-intlayer
+yarn intlayer init
+```
+
+```bash packageManager="bun"
+bun add intlayer vue-intlayer
+bun add --dev nuxt-intlayer
+bunx intlayer init
 ```
 
 - **intlayer**

package/docs/pt/intlayer_with_react_native+expo.md

@@ -45,16 +45,25 @@ No seu projeto React Native, instale os seguintes pacotes:
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
 npm install --save-dev react-native-intlayer
+npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer react-intlayer
 pnpm add --save-dev react-native-intlayer
+pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer react-intlayer
 yarn add --save-dev react-native-intlayer
+yarn intlayer init
+```
+
+```bash packageManager="bun"
+bun add intlayer react-intlayer
+bun add --dev react-native-intlayer
+bunx intlayer init
 ```
 
 ### Pacotes

package/docs/pt/intlayer_with_react_router_v7.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-04
-updatedAt: 2025-09-04
+updatedAt: 2025-12-27
 title: Como traduzir seu React Router v7 – guia i18n 2025
 description: Aprenda como adicionar internacionalização (i18n) à sua aplicação React Router v7 usando Intlayer. Siga este guia completo para tornar seu app multilíngue com roteamento sensível à localidade.
 keywords:
@@ -21,6 +21,9 @@ applicationTemplate: https://github.com/AydinTheFirst/react-router-intlayer
 author: AydinTheFirst
 youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
 history:
+  - version: 7.5.6
+    date: 2025-12-27
+    changes: Atualizar Layout e lidar com 404
   - version: 5.8.2
     date: 2025-09-04
     changes: Adicionado para React Router v7
@@ -57,11 +60,25 @@ Instale os pacotes necessários usando seu gerenciador de pacotes preferido:
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
 npm install vite-intlayer --save-dev
+npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer react-intlayer
 pnpm add vite-intlayer --save-dev
+pnpm intlayer init
+```
+
+```bash packageManager="yarn"
+yarn add intlayer react-intlayer
+yarn add vite-intlayer --save-dev
+yarn intlayer init
+```
+
+```bash packageManager="bun"
+bun add intlayer react-intlayer
+bun add vite-intlayer --dev
+bunx intlayer init
 ```
 
 - **intlayer**
@@ -160,15 +177,12 @@ module.exports = config;
 
 Configure sua configuração de rotas com rotas que reconhecem o idioma:
 
-```typescript fileName="app/routes.ts" codeFormat="typescript"
+```typescript fileName="app/routes.ts"
 import { layout, route, type RouteConfig } from "@react-router/dev/routes";
 
 export default [
-  layout("routes/layout.tsx", [
-    route("/", "routes/page.tsx"), // Página raiz - redireciona para o idioma
-    route("/:lang", "routes/[lang]/page.tsx"), // Página inicial localizada
-    route("/:lang?/about", "routes/[lang]/about/page.tsx"), // Página sobre localizada
-  ]),
+  route("/:lang?", "routes/page.tsx"), // Página inicial localizada
+  route("/:lang?/about", "routes/about/page.tsx"), // Página sobre localizada
 ] satisfies RouteConfig;
 ```
 
@@ -195,17 +209,50 @@ Configure seu layout raiz e layouts específicos para cada localidade:
 
 #### Layout Raiz
 
-```tsx fileName="app/routes/layout.tsx" codeFormat="typescript"
-tsx fileName="app/routes/layout.tsx" codeFormat="typescript"
-// app/routes/layout.tsx
-import { Outlet } from "react-router";
+```tsx fileName="app/root.tsx"
+import { getLocaleFromPath } from "intlayer";
 import { IntlayerProvider } from "react-intlayer";
+import {
+  data,
+  Meta,
+  Scripts,
+  ScrollRestoration,
+  useLoaderData,
+} from "react-router";
+import type { Route } from "./+types/root";
+
+// ... Unchanged App, links and ErrorBoundary code
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const locale = getLocaleFromPath(request.url);
+
+  if (!locale) {
+    throw data("Language not supported", { status: 404 });
+  }
+
+  return { locale };
+}
+
+export function Layout({
+  children,
+}: { children: React.ReactNode } & Route.ComponentProps) {
+  const data = useLoaderData<typeof loader>();
+  const { locale } = data ?? {};
 
-export default function RootLayout() {
   return (
-    <IntlayerProvider>
-      <Outlet />
-    </IntlayerProvider>
+    <html lang={locale}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta content="width=device-width, initial-scale=1" name="viewport" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
   );
 }
 ```
@@ -299,46 +346,46 @@ export default function LocalizedLink({ to, ...props }: RouterLinkProps) {
 
 Acesse seus dicionários de conteúdo em toda a sua aplicação:
 
-#### Página de Redirecionamento Raiz
+#### Página Inicial Localizada
 
-```tsx fileName="app/routes/page.tsx" codeFormat="typescript"
-import { useLocale } from "react-intlayer";
-import { Navigate } from "react-router";
+```tsx fileName="app/routes/page.tsx"
+import { getIntlayer, validatePrefix } from "intlayer";
+import { useIntlayer } from "react-intlayer";
+import { data } from "react-router";
 
-export default function Page() {
-  const { locale } = useLocale();
+import { LocaleSwitcher } from "~/components/locale-switcher";
 
-  return <Navigate replace to={locale} />;
-}
-```
+import { Navbar } from "~/components/navbar";
+import type { Route } from "./+types/page";
 
-#### Página Inicial Localizada
+export const loader = ({ params }: Route.LoaderArgs) => {
+  const { locale } = params;
 
-```tsx fileName="app/routes/[lang]/page.tsx" codeFormat="typescript"
-import { useIntlayer } from "react-intlayer";
-import LocalizedLink from "~/components/localized-link";
+  const { isValid } = validatePrefix(locale);
+
+  if (!isValid) {
+    throw data("Locale not supported", { status: 404 });
+  }
+};
+
+export const meta: Route.MetaFunction = ({ params }) => {
+  const content = getIntlayer("page", params.locale);
+
+  return [
+    { title: content.title },
+    { content: content.description, name: "description" },
+  ];
+};
 
 export default function Page() {
-  const content = useIntlayer("page");
+  const { title, description, aboutLink } = useIntlayer("page");
 
   return (
-    <div style={{ padding: "2rem", textAlign: "center" }}>
-      <h1>{content.title}</h1>
-      <p>{content.description}</p>
-      <nav style={{ marginTop: "2rem" }}>
-        <LocalizedLink
-          to="/about"
-          style={{
-            display: "inline-block",
-            padding: "0.5rem 1rem",
-            backgroundColor: "#007bff",
-            color: "white",
-            textDecoration: "none",
-            borderRadius: "4px",
-          }}
-        >
-          {content.aboutLink}
-        </LocalizedLink>
+    <div>
+      <h1>{title}</h1>
+      <p>{description}</p>
+      <nav>
+        <LocalizedLink to="/about">{aboutLink}</LocalizedLink>
       </nav>
     </div>
   );

package/docs/pt/intlayer_with_react_router_v7_fs_routes.md

@@ -31,6 +31,8 @@ history:
 
 Este guia demonstra como integrar o **Intlayer** para internacionalização perfeita em projetos React Router v7 usando **roteamento baseado em sistema de arquivos** (`@react-router/fs-routes`) com roteamento consciente de localidade, suporte a TypeScript e práticas modernas de desenvolvimento.
 
+Para roteamento do lado do cliente, consulte o guia [Intlayer com React Router v7](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_with_react_router_v7.md).
+
 ## Índice
 
 <TOC/>
@@ -80,6 +82,7 @@ Instale os pacotes necessários usando seu gerenciador de pacotes preferido:
 npm install intlayer react-intlayer
 npm install vite-intlayer --save-dev
 npm install @react-router/fs-routes --save-dev
+npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
@@ -88,6 +91,13 @@ pnpm add vite-intlayer --save-dev
 pnpm add @react-router/fs-routes --save-dev
 ```
 
+```bash packageManager="bun"
+bun add intlayer react-intlayer
+bun add vite-intlayer --dev
+bun add @react-router/fs-routes --dev
+bunx intlayer init
+```
+
 - **intlayer**
 
   O pacote principal que fornece ferramentas de internacionalização para gerenciamento de configuração, tradução, [declaração de conteúdo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/dictionary/content_file.md), transpilação e [comandos CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/cli/index.md).
@@ -195,12 +205,13 @@ Crie os seguintes arquivos no seu diretório `app/routes/`:
 #### Estrutura de Arquivos
 
 ```bash
-app/routes/
-├── ($locale)._layout.tsx        # Wrapper de layout para rotas de locale
-├── ($locale)._index.tsx         # Página inicial (/:locale?)
-├── ($locale)._index.content.ts  # Conteúdo da página inicial
-├── ($locale).about.tsx          # Página About (/:locale?/about)
-└── ($locale).about.content.ts   # Conteúdo da página About
+app/
+├── root.tsx                         # Wrapper de layout para rotas de locale
+└──routes/
+    ├── ($locale)._index.tsx         # Página inicial (/, /es, etc.)
+    ├── ($locale)._index.content.ts  # Conteúdo da página inicial
+    ├── ($locale).about.tsx          # Página About (/about, /es/about, etc.)
+    └── ($locale).about.content.ts   # Conteúdo da página About
 ```
 
 As convenções de nomenclatura:
@@ -212,23 +223,50 @@ As convenções de nomenclatura:
 
 #### Componente de Layout
 
-```tsx fileName="app/routes/($locale)._layout.tsx"
+```tsx fileName="app/root.tsx"
+import { getLocaleFromPath } from "intlayer";
 import { IntlayerProvider } from "react-intlayer";
-import { Outlet } from "react-router";
+import {
+  isRouteErrorResponse,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useLoaderData,
+} from "react-router";
 
-import { useI18nHTMLAttributes } from "~/hooks/useI18nHTMLAttributes";
+import type { Route } from "./+types/root";
 
-import type { Route } from "./+types/($locale)._layout";
+import "./app.css";
 
-export default function RootLayout({ params }: Route.ComponentProps) {
-  useI18nHTMLAttributes();
+// links and ErrorBoundary code
 
-  const { locale } = params;
+export async function loader({ request }: Route.LoaderArgs) {
+  const locale = getLocaleFromPath(request.url);
+
+  return { locale };
+}
+
+export function Layout({
+  children,
+}: { children: React.ReactNode } & Route.ComponentProps) {
+  const data = useLoaderData<typeof loader>();
+  const { locale } = data ?? {};
 
   return (
-    <IntlayerProvider locale={locale}>
-      <Outlet />
-    </IntlayerProvider>
+    <html lang={locale}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta content="width=device-width, initial-scale=1" name="viewport" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
   );
 }
 ```
@@ -236,11 +274,34 @@ export default function RootLayout({ params }: Route.ComponentProps) {
 #### Página Index
 
 ```tsx fileName="app/routes/($locale)._index.tsx"
+import { getIntlayer, validatePrefix } from "intlayer";
 import { useIntlayer } from "react-intlayer";
-import { LocalizedLink } from "~/components/localized-link";
+import { data } from "react-router";
+
+import { LocaleSwitcher } from "~/components/locale-switcher";
+import { Navbar } from "~/components/navbar";
 
 import type { Route } from "./+types/($locale)._index";
 
+export const loader = ({ params }: Route.LoaderArgs) => {
+  const { locale } = params;
+
+  const { isValid } = validatePrefix(locale);
+
+  if (!isValid) {
+    throw data("Locale not supported", { status: 404 });
+  }
+};
+
+export const meta: Route.MetaFunction = ({ params }) => {
+  const content = getIntlayer("page", params.locale);
+
+  return [
+    { title: content.title },
+    { content: content.description, name: "description" },
+  ];
+};
+
 export default function Page() {
   const { title, description, aboutLink } = useIntlayer("page");
 
@@ -259,11 +320,34 @@ export default function Page() {
 #### Página About
 
 ```tsx fileName="app/routes/($locale).about.tsx"
+import { getIntlayer, validatePrefix } from "intlayer";
 import { useIntlayer } from "react-intlayer";
-import { LocalizedLink } from "~/components/localized-link";
+import { data } from "react-router";
+
+import { LocaleSwitcher } from "~/components/locale-switcher";
+import { Navbar } from "~/components/navbar";
 
 import type { Route } from "./+types/($locale).about";
 
+export const loader = ({ params }: Route.LoaderArgs) => {
+  const { locale } = params;
+
+  const { isValid } = validatePrefix(locale);
+
+  if (!isValid) {
+    throw data("Locale not supported", { status: 404 });
+  }
+};
+
+export const meta: Route.MetaFunction = ({ params }) => {
+  const content = getIntlayer("about", params.locale);
+
+  return [
+    { title: content.title },
+    { content: content.description, name: "description" },
+  ];
+};
+
 export default function AboutPage() {
   const { title, content, homeLink } = useIntlayer("about");
 
@@ -482,7 +566,7 @@ export const useI18nHTMLAttributes = () => {
 };
 ```
 
-Este hook já é usado no componente de layout (`($locale)._layout.tsx`) mostrado no Passo 5.
+Este hook já é usado no componente de layout (`root.tsx`) mostrado no Passo 5.
 
 ### Passo 10: Adicionar middleware (Opcional)
 

package/docs/pt/intlayer_with_svelte_kit.md

@@ -99,21 +99,25 @@ Instale os pacotes necessários usando npm:
 ```bash packageManager="npm"
 npm install intlayer svelte-intlayer
 npm install vite-intlayer --save-dev
+npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer svelte-intlayer
 pnpm add vite-intlayer --save-dev
+pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer svelte-intlayer
 yarn add vite-intlayer --save-dev
+yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer svelte-intlayer
 bun add vite-intlayer --save-dev
+bunx intlayer init
 ```
 
 - **intlayer**: O pacote principal de i18n.
@@ -273,21 +277,25 @@ Instale os pacotes necessários usando npm:
 ```bash packageManager="npm"
 npm install intlayer svelte-intlayer
 npm install vite-intlayer --save-dev
+npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer svelte-intlayer
 pnpm add vite-intlayer --save-dev
+pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer svelte-intlayer
 yarn add vite-intlayer --save-dev
+yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer svelte-intlayer
 bun add vite-intlayer --save-dev
+bunx intlayer init
 ```
 
 - **intlayer**: O pacote principal de i18n.