i18n test

adamstrojil · Nov 3, 2024 · 5c02b76 · 5c02b76
1 parent 5a198ce
commit 5c02b76
Show file tree

Hide file tree

Showing 15 changed files with 2,082 additions and 1,031 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
-}
+  "extends": ["next/babel", "next/core-web-vitals"]
+}
diff --git a/config.ts b/config.ts
@@ -0,0 +1 @@
+export const locales = ["en", "cs"] as const
diff --git a/messages/cs.json b/messages/cs.json
@@ -0,0 +1,5 @@
+{
+  "Home": {
+    "position": "Frontend vývojář"
+  }
+}
diff --git a/messages/en.json b/messages/en.json
@@ -0,0 +1,5 @@
+{
+  "Home": {
+    "position": "Frontend developer"
+  }
+}
diff --git a/next.config.js b/next.config.js
@@ -1,6 +1,10 @@
+const createNextIntlPlugin = require("next-intl/plugin");
+
+const withNextIntl = createNextIntlPlugin();
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  output: "export", // <=== enables static exports
+  // output: "export", // <=== enables static exports
 };
 
-module.exports = nextConfig;
+module.exports = withNextIntl(nextConfig);
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,7 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "13.5.4",
+    "next": "^14.2.15",
+    "next-intl": "^3.24.0",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.3.0"
@@ -20,7 +21,7 @@
     "@types/react-dom": "^18",
     "autoprefixer": "^10",
     "eslint": "^8",
-    "eslint-config-next": "13.5.4",
+    "eslint-config-next": "^14.2.15",
     "postcss": "^8",
     "tailwindcss": "^3",
     "typescript": "^5"

diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -0,0 +1,120 @@
+// import '../globals.css';
+// import type { Metadata } from 'next';
+// import { NextIntlClientProvider } from 'next-intl';
+// import { getMessages, unstable_setRequestLocale } from 'next-intl/server';
+
+// import { Quicksand, Poppins } from 'next/font/google';
+// import { locales } from '../../../config';
+
+// const quicksand = Quicksand({
+//     weight: ['300', '400', '500', '600', '700'],
+//     variable: '--font-quicksand',
+//     subsets: ['latin'],
+//     display: 'swap',
+// });
+
+// const poppins = Poppins({
+//     weight: ['100', '200', '300', '400', '500', '600'],
+//     variable: '--font-poppins',
+//     subsets: ['latin'],
+//     display: 'swap',
+// });
+
+// export const metadata: Metadata = {
+//     title: "Adam Strojil's CV",
+//     description: 'CV of a React developer Adam Strojil.',
+// };
+
+// export const generateStaticParams =() => {
+//     return locales.map((locale) => ({locale}))
+// }
+
+// const RootLayout = async ({
+//     children,
+//     params: { locale },
+// }: {
+//     children: React.ReactNode;
+//     params: { locale: string };
+// }) => {
+//     const messages = await getMessages();
+//     unstable_setRequestLocale(locale)
+//     return (
+//         <html className={`${quicksand.variable} ${poppins.variable}`} lang={locale}>
+//             <body>
+//                 <NextIntlClientProvider messages={messages}>{children}</NextIntlClientProvider>
+//             </body>
+//         </html>
+//     );
+// };
+
+// export default RootLayout;
+
+
+import {NextIntlClientProvider} from 'next-intl';
+import {getMessages} from 'next-intl/server';
+import {notFound} from 'next/navigation';
+import {routing} from '@/i18n/routing';
+
+
+import '../globals.css';
+import type { Metadata } from 'next';
+// import { NextIntlClientProvider } from 'next-intl';
+// import { getMessages, unstable_setRequestLocale } from 'next-intl/server';
+import { Quicksand, Poppins } from 'next/font/google';
+import {setRequestLocale} from 'next-intl/server';
+import { locales } from '../../../config';
+
+
+
+const quicksand = Quicksand({
+    weight: ['300', '400', '500', '600', '700'],
+    variable: '--font-quicksand',
+    subsets: ['latin'],
+    display: 'swap',
+});
+
+const poppins = Poppins({
+    weight: ['100', '200', '300', '400', '500', '600'],
+    variable: '--font-poppins',
+    subsets: ['latin'],
+    display: 'swap',
+});
+
+export const metadata: Metadata = {
+    title: "Adam Strojil's CV",
+    description: 'CV of a React developer Adam Strojil.',
+};
+
+export function generateStaticParams() {
+    return locales.map((locale) => ({locale}));
+  }
+
+export default async function LocaleLayout({
+  children,
+  params: {locale}
+}: {
+  children: React.ReactNode;
+  params: {locale: string};
+}) {
+  // Ensure that the incoming `locale` is valid
+  // if (!routing.locales.includes(locale as any)) {
+  //   notFound();
+  // }
+
+  setRequestLocale(locale);
+
+  // Providing all messages to the client
+  // side is the easiest way to get started
+  const messages = await getMessages();
+
+  return (
+    <html className={`${quicksand.variable} ${poppins.variable}`} lang={locale}>
+      <body>
+        <NextIntlClientProvider messages={messages}>
+          {children}
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}
+
diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
@@ -0,0 +1,38 @@
+import { DATA } from '@/app/data/AdamStrojilEnglish';
+import { Page, Main, TwoColumnLayout } from '../components';
+import { Header, Languages, Skills, Footer, WorkExperience, Education, PersonalProjects } from '../sections';
+import { useTranslations } from 'next-intl';
+import { setRequestLocale } from 'next-intl/server';
+
+const { specialization, name, surname, contacts, workExperience, education, projects, skills, languages } = DATA;
+const fullName = `${name} ${surname}`;
+
+const Home = ({ params: { locale } }: { params: { locale: string } }) => {
+    setRequestLocale(locale);
+
+    const t = useTranslations('Home');
+    return (
+        <Page>
+            {/* fullName */}
+            <Header name={fullName} specialization={t('position')} contacts={contacts} />
+            <Main>
+                <TwoColumnLayout
+                    main={<WorkExperience workExperiences={workExperience} />}
+                    aside={<Education educations={education} />}
+                />
+                <TwoColumnLayout
+                    main={<PersonalProjects personalProjects={projects} />}
+                    aside={
+                        <>
+                            <Skills skills={skills} />
+                            <Languages languages={languages} />
+                        </>
+                    }
+                />
+            </Main>
+            <Footer />
+        </Page>
+    );
+};
+
+export default Home;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
diff --git a/src/app/page.tsx b/src/app/page.tsx
diff --git a/src/config.ts b/src/config.ts
@@ -0,0 +1 @@
+export const locales = ["en", "cs"] as const
diff --git a/src/i18n/request.ts b/src/i18n/request.ts
@@ -0,0 +1,19 @@
+import {getRequestConfig} from 'next-intl/server';
+import {routing} from './routing';
+import { locales } from "../config";
+
+
+export default getRequestConfig(async ({requestLocale}) => {
+  // This typically corresponds to the `[locale]` segment
+  let locale = await requestLocale;
+
+  // Ensure that a valid locale is used
+  if (!locale || !locales.includes(locale as any)) {
+    locale = routing.defaultLocale;
+  }
+
+  return {
+    locale,
+    messages: (await import(`../../messages/${locale}.json`)).default
+  };
+});
diff --git a/src/i18n/routing.ts b/src/i18n/routing.ts
@@ -0,0 +1,16 @@
+import {defineRouting} from 'next-intl/routing';
+import {createNavigation} from 'next-intl/navigation';
+import { locales } from "../config";
+
+export const routing = defineRouting({
+  // A list of all locales that are supported
+  locales,
+
+  // Used when no locale matches
+  defaultLocale: 'cs'
+});
+
+// Lightweight wrappers around Next.js' navigation APIs
+// that will consider the routing configuration
+export const {Link, redirect, usePathname, useRouter} =
+  createNavigation(routing);
diff --git a/src/middleware.ts b/src/middleware.ts
@@ -0,0 +1,22 @@
+import createMiddleware from "next-intl/middleware";
+import { locales } from "./config";
+
+export default createMiddleware({
+  locales,
+  defaultLocale: "cs",
+});
+
+export const config = {
+  matcher: ["/", "/(cs|en)/:path*"],
+};
+
+
+// import createMiddleware from 'next-intl/middleware';
+// import {routing} from './i18n/routing';
+
+// export default createMiddleware(routing);
+
+// export const config = {
+//   // Match only internationalized pathnames
+//   matcher: ['/', '/(cs|en)/:path*']
+// };