From a02c53a99d72051fa59cd35bf31f201773bc44b9 Mon Sep 17 00:00:00 2001 From: RaviAnand Mohabir Date: Mon, 26 Aug 2024 15:37:02 +0200 Subject: [PATCH] feat: :sparkles: configure i18n with next-international enable rewrite strategy to default language, move pages under /[locale], configure middleware and client/server utils --- next.config.mjs | 6 +- package.json | 1 + src/api/about.ts | 6 ++ src/api/contact.ts | 6 ++ src/api/gallery.ts | 6 ++ src/api/home.ts | 6 ++ src/api/index.ts | 4 + .../Moderustic-VariableFont_wght.ttf | Bin src/app/(frontend)/[locale]/about/page.tsx | 24 +++++ .../{ => [locale]}/contact/page.tsx | 0 src/app/(frontend)/{ => [locale]}/gallery.tsx | 5 +- src/app/(frontend)/[locale]/layout.tsx | 47 +++++++++ .../(frontend)/{ => [locale]}/menu/page.tsx | 0 src/app/(frontend)/{ => [locale]}/page.tsx | 16 +-- src/app/(frontend)/about/page.tsx | 1 - src/app/(frontend)/layout.tsx | 29 ------ src/app/(payload)/{ => admin}/custom.scss | 0 src/app/(payload)/{ => admin}/layout.tsx | 12 +-- src/app/my-route/route.ts | 14 --- src/components/layout/footer.tsx | 9 +- src/components/layout/navbar.tsx | 13 +-- src/i18n/client.ts | 8 ++ src/i18n/de.ts | 7 ++ src/i18n/en.ts | 7 ++ src/i18n/server.ts | 6 ++ src/i18n/settings.ts | 2 + src/middleware.ts | 18 ++++ src/payload.config.ts | 8 +- yarn.lock | 96 +++++++++++++++++- 29 files changed, 268 insertions(+), 89 deletions(-) create mode 100644 src/api/about.ts create mode 100644 src/api/contact.ts create mode 100644 src/api/gallery.ts create mode 100644 src/api/home.ts create mode 100644 src/api/index.ts rename src/app/(frontend)/{ => [locale]}/Moderustic-VariableFont_wght.ttf (100%) create mode 100644 src/app/(frontend)/[locale]/about/page.tsx rename src/app/(frontend)/{ => [locale]}/contact/page.tsx (100%) rename src/app/(frontend)/{ => [locale]}/gallery.tsx (59%) create mode 100644 src/app/(frontend)/[locale]/layout.tsx rename src/app/(frontend)/{ => [locale]}/menu/page.tsx (100%) rename src/app/(frontend)/{ => [locale]}/page.tsx (72%) delete mode 100644 src/app/(frontend)/about/page.tsx delete mode 100644 src/app/(frontend)/layout.tsx rename src/app/(payload)/{ => admin}/custom.scss (100%) rename src/app/(payload)/{ => admin}/layout.tsx (91%) delete mode 100644 src/app/my-route/route.ts create mode 100644 src/i18n/client.ts create mode 100644 src/i18n/de.ts create mode 100644 src/i18n/en.ts create mode 100644 src/i18n/server.ts create mode 100644 src/i18n/settings.ts create mode 100644 src/middleware.ts diff --git a/next.config.mjs b/next.config.mjs index 7ec4bd8..b6816a3 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -1,8 +1,8 @@ -import { withPayload } from '@payloadcms/next/withPayload' +import { withPayload } from "@payloadcms/next/withPayload"; /** @type {import('next').NextConfig} */ const nextConfig = { // Your Next.js config here -} +}; -export default withPayload(nextConfig) +export default withPayload(nextConfig); diff --git a/package.json b/package.json index 56c97bb..81bc6ac 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "localbites": "file:", "lucide-react": "^0.436.0", "next": "15.0.0-canary.104", + "next-international": "^1.2.4", "payload": "beta", "react": "19.0.0-rc-06d0b89e-20240801", "react-dom": "19.0.0-rc-06d0b89e-20240801", diff --git a/src/api/about.ts b/src/api/about.ts new file mode 100644 index 0000000..6b19593 --- /dev/null +++ b/src/api/about.ts @@ -0,0 +1,6 @@ +import { getPayload } from "@/utils/payload"; + +export const getAbout = async () => { + const payload = await getPayload(); + return await payload.findGlobal({ slug: "about" }); +}; diff --git a/src/api/contact.ts b/src/api/contact.ts new file mode 100644 index 0000000..44c00b1 --- /dev/null +++ b/src/api/contact.ts @@ -0,0 +1,6 @@ +import { getPayload } from "@/utils/payload"; + +export const getContact = async () => { + const payload = await getPayload(); + return await payload.findGlobal({ slug: "contact" }); +}; diff --git a/src/api/gallery.ts b/src/api/gallery.ts new file mode 100644 index 0000000..439cc8e --- /dev/null +++ b/src/api/gallery.ts @@ -0,0 +1,6 @@ +import { getPayload } from "@/utils/payload"; + +export const getGallery = async () => { + const payload = await getPayload(); + return await payload.findGlobal({ slug: "gallery" }); +}; diff --git a/src/api/home.ts b/src/api/home.ts new file mode 100644 index 0000000..a0f3f4e --- /dev/null +++ b/src/api/home.ts @@ -0,0 +1,6 @@ +import { getPayload } from "@/utils/payload"; + +export const getHome = async () => { + const payload = await getPayload(); + return await payload.findGlobal({ slug: "home" }); +}; diff --git a/src/api/index.ts b/src/api/index.ts new file mode 100644 index 0000000..4a11577 --- /dev/null +++ b/src/api/index.ts @@ -0,0 +1,4 @@ +export * from "./about"; +export * from "./contact"; +export * from "./gallery"; +export * from "./home"; diff --git a/src/app/(frontend)/Moderustic-VariableFont_wght.ttf b/src/app/(frontend)/[locale]/Moderustic-VariableFont_wght.ttf similarity index 100% rename from src/app/(frontend)/Moderustic-VariableFont_wght.ttf rename to src/app/(frontend)/[locale]/Moderustic-VariableFont_wght.ttf diff --git a/src/app/(frontend)/[locale]/about/page.tsx b/src/app/(frontend)/[locale]/about/page.tsx new file mode 100644 index 0000000..c39a57c --- /dev/null +++ b/src/app/(frontend)/[locale]/about/page.tsx @@ -0,0 +1,24 @@ +import { Box, styled } from "@styled-system/jsx"; + +import { Metadata } from "next"; +import RichText from "@/components/rich-text"; +import { getAbout } from "@/api"; + +export default async function About() { + const about = await getAbout(); + + return ( + + + + + ); +} + +export async function generateMetadata(): Promise { + const about = await getAbout(); + + return { + title: about.name, + }; +} diff --git a/src/app/(frontend)/contact/page.tsx b/src/app/(frontend)/[locale]/contact/page.tsx similarity index 100% rename from src/app/(frontend)/contact/page.tsx rename to src/app/(frontend)/[locale]/contact/page.tsx diff --git a/src/app/(frontend)/gallery.tsx b/src/app/(frontend)/[locale]/gallery.tsx similarity index 59% rename from src/app/(frontend)/gallery.tsx rename to src/app/(frontend)/[locale]/gallery.tsx index d7fe370..0906574 100644 --- a/src/app/(frontend)/gallery.tsx +++ b/src/app/(frontend)/[locale]/gallery.tsx @@ -1,10 +1,9 @@ import Carousel from "@/components/ui/carousel"; import { Media } from "@/payload-types"; -import { getPayload } from "@/utils/payload"; +import { getGallery } from "@/api"; export default async function Gallery() { - const payload = await getPayload(); - const { images } = await payload.findGlobal({ slug: "gallery" }); + const { images } = await getGallery(); return image as Media)} w="100%" />; } diff --git a/src/app/(frontend)/[locale]/layout.tsx b/src/app/(frontend)/[locale]/layout.tsx new file mode 100644 index 0000000..8b22843 --- /dev/null +++ b/src/app/(frontend)/[locale]/layout.tsx @@ -0,0 +1,47 @@ +import "../../globals.css"; + +import Footer from "@/components/layout/footer"; +import { I18nProviderClient } from "@/i18n/client"; +import { Metadata } from "next"; +import Navbar from "@/components/layout/navbar"; +import { getAbout } from "@/api"; +import localFont from "next/font/local"; +import { locales } from "@/i18n/settings"; +import { styled } from "@styled-system/jsx"; + +const moderustic = localFont({ + src: "./Moderustic-VariableFont_wght.ttf", + display: "swap", +}); + +export default async function RootLayout({ + params: { locale }, + children, +}: { + params: { locale: string }; + children: React.ReactNode; +}) { + return ( + + + + + {children}{" "} + +