QuiiBz · QuiiBz · Feb 17, 2024 · Feb 17, 2024 · Feb 17, 2024 · Feb 18, 2024
diff --git a/examples/app/.gitignore b/examples/app/.gitignore
@@ -0,0 +1 @@
+.vercel
diff --git a/examples/app/README.md b/examples/app/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/examples/app/app/[locale]/[...notFound]/page.tsx b/examples/app/app/[locale]/[...notFound]/page.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function NotFound() {
+  return (
+    <div>
+      <h2>Custom Not Found page</h2>
+      <p>Could not find requested resource</p>
+    </div>
+  );
+}
diff --git a/examples/app/app/[locale]/client-component.tsx b/examples/app/app/[locale]/client-component.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+// @ts-expect-error - missing import
+import React, { use } from 'react';
+import { useChangeLocale, getI18n, getLocale, getScopedI18n } from '@/locales';
+
+export function ClientComponent() {
+  const t = use(getI18n());
+  const scopedT = use(getScopedI18n('hello'));
+  const locale = getLocale();
+  const changeLocale = useChangeLocale();
+
+  return (
+    <div>
+      <p>{t('hello.world')}</p>
+      <p>{scopedT('world')}</p>
+      <p>
+        {t('hello.param', {
+          name: 'John',
+        })}
+      </p>
+      <p>
+        {scopedT('param', {
+          name: 'John',
+        })}
+      </p>
+      <p>Current locale: {locale}</p>
+      <button
+        type="button"
+        onClick={() => {
+          changeLocale('en');
+        }}
+      >
+        EN
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          changeLocale('fr');
+        }}
+      >
+        FR
+      </button>
+    </div>
+  );
+}
diff --git a/examples/app/app/[locale]/layout.tsx b/examples/app/app/[locale]/layout.tsx
@@ -0,0 +1,21 @@
+import { generateI18nStaticParams } from '@/locales';
+import React from 'react';
+
+export const dynamicParams = false;
+export function generateStaticParams() {
+  return generateI18nStaticParams();
+}
+
+export default function RootLayout({
+  children,
+  params: { locale },
+}: Readonly<{
+  children: React.ReactNode;
+  params: { locale: string };
+}>) {
+  return (
+    <html lang={locale}>
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/examples/app/app/[locale]/page.tsx b/examples/app/app/[locale]/page.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { getI18n, getLocale, getScopedI18n } from '@/locales';
+import { ClientComponent } from './client-component';
+import { Suspense } from 'react';
+
+export default async function Home() {
+  const t = await getI18n();
+  const scopedT = await getScopedI18n('hello');
+  const locale = getLocale();
+
+  return (
+    <div>
+      <p>{t('hello.world')}</p>
+      <p>{scopedT('world')}</p>
+      <p>
+        {t('hello.param', {
+          name: 'John',
+        })}
+      </p>
+      <p>
+        {scopedT('param', {
+          name: 'John',
+        })}
+      </p>
+      <p>Current locale: {locale}</p>
+      <hr />
+      <Suspense>
+        <ClientComponent />
+      </Suspense>
+    </div>
+  );
+}
diff --git a/examples/app/locales/en.ts b/examples/app/locales/en.ts
@@ -0,0 +1,4 @@
+export default {
+  'hello.world': 'Hello, World!',
+  'hello.param': 'Hello, {name}!',
+} as const;
diff --git a/examples/app/locales/fr.ts b/examples/app/locales/fr.ts
@@ -0,0 +1,4 @@
+export default {
+  'hello.world': 'Bonjour, le monde !',
+  'hello.param': 'Bonjour, {name} !',
+} as const;
diff --git a/examples/app/locales/index.ts b/examples/app/locales/index.ts
@@ -0,0 +1,14 @@
+import { createI18n } from 'next-international/app';
+// import en from './en';
+
+export const { getI18n, getScopedI18n, generateI18nStaticParams, getLocale, useChangeLocale } = createI18n(
+  {
+    en: () => import('./en'),
+    fr: () => import('./fr'),
+  },
+  {
+    // segmentName: 'locale',
+    // basePath: '/base',
+    // fallbackLocale: en,
+  },
+);
diff --git a/examples/app/middleware.ts b/examples/app/middleware.ts
@@ -0,0 +1,18 @@
+import { NextResponse } from 'next/server';
+import { createI18nMiddleware } from 'next-international/middleware';
+
+export const middleware = createI18nMiddleware(
+  request => {
+    console.log('User middleware:', request.url);
+    return NextResponse.next();
+  },
+  {
+    locales: ['en', 'fr'],
+    defaultLocale: 'en',
+    // urlMappingStrategy: 'rewrite',
+  },
+);
+
+export const config = {
+  matcher: ['/((?!api|static|.*\\..*|_next|favicon.ico|robots.txt).*)'],
+};
diff --git a/examples/app/next-env.d.ts b/examples/app/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/app/next.config.mjs b/examples/app/next.config.mjs
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;
diff --git a/examples/app/package.json b/examples/app/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "14.1.1",
+    "next-international": "workspace:*",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "typescript": "^5"
+  }
+}
diff --git a/examples/app/tsconfig.json b/examples/app/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}