Merge pull request #76 from Blazity/lang-lib

Lang lib

i18n.ts

@@ -0,0 +1 @@
+// static i18n configuration

next.config.mjs

@@ -1,31 +1,35 @@
 import withBundleAnalyzer from "@next/bundle-analyzer"
 import withPlugins from "next-compose-plugins"
+import withNextIntl from "next-intl/plugin"
 import { env } from "./src/env.mjs"
 
 /**
  * @type {import('next').NextConfig}
  */
-const config = withPlugins([[withBundleAnalyzer({ enabled: env.ANALYZE })]], {
- reactStrictMode: true,
- experimental: { instrumentationHook: true },
- rewrites() {
- return {
- beforeFiles: [
- { source: "/healthz", destination: "/api/health" },
- { source: "/api/healthz", destination: "/api/health" },
- { source: "/health", destination: "/api/health" },
- { source: "/ping", destination: "/api/health" },
+const config = withPlugins(
+ [[withBundleAnalyzer({ enabled: env.ANALYZE })]],
+ withNextIntl("./i18n.ts")({
+ reactStrictMode: true,
+ experimental: { instrumentationHook: true },
+ rewrites() {
+ return {
+ beforeFiles: [
+ { source: "/healthz", destination: "/api/health" },
+ { source: "/api/healthz", destination: "/api/health" },
+ { source: "/health", destination: "/api/health" },
+ { source: "/ping", destination: "/api/health" },
+ ],
+ }
+ },
+ images: {
+ remotePatterns: [
+ {
+ protocol: "https",
+ hostname: "media.graphassets.com",
+ },
  ],
- }
- },
- images: {
- remotePatterns: [
- {
- protocol: "https",
- hostname: "media.graphassets.com",
- },
- ],
- },
-})
+ },
+ })
+)
 
 export default config

package.json

@@ -67,6 +67,7 @@
  "negotiator": "^0.6.3",
  "next": "^13.5.5",
  "next-compose-plugins": "^2.2.1",
+ "next-intl": "3.0.0-beta.19",
  "next-sitemap": "^4.2.3",
  "p-throttle": "^5.1.0",
  "react": "^18.2.0",
@@ -138,4 +139,4 @@
  "node": ">=18.15.0"
  },
  "packageManager": "[email protected]"
-}
+}

src/app/[lang]/[...rest]/page.tsx

@@ -0,0 +1,5 @@
+import { notFound } from "next/navigation"
+
+export default function CatchAllPage() {
+ notFound()
+}

src/app/[lang]/[slug]/page.tsx

@@ -1,5 +1,6 @@
 import { Metadata } from "next"
 import { notFound } from "next/navigation"
+import { unstable_setRequestLocale } from "next-intl/server"
 import { RichText } from "@/components/RichText/RichText"
 import { hygraphLocaleToStandardNotation, i18n, Locale } from "@/i18n/i18n"
 import { getPageBySlug, getPageMetadataBySlug, listPagesForSitemap } from "@/lib/client"
@@ -28,6 +29,7 @@ export async function generateMetadata({ params: { slug, lang } }: CustomPagePro
 }
 
 export default async function Web({ params: { slug, lang } }: CustomPageProps) {
+ unstable_setRequestLocale(lang)
  const page = await getPageBySlug({ locale: lang, slug })
 
  if (!page) notFound()

src/app/[lang]/article/[slug]/page.tsx

@@ -1,5 +1,6 @@
 import { notFound } from "next/navigation"
 import { Metadata } from "next/types"
+import { NextIntlClientProvider } from "next-intl"
 import { HeroArticleCard } from "@/components/ArticleCard/HeroArticleCard"
 import { RecommendedArticles } from "@/components/RecommendedArticles/RecommendedArticles"
 import { RichText } from "@/components/RichText/RichText"
@@ -44,16 +45,17 @@ export default async function Web({ params: { slug, lang } }: ArticlePageProps)
  slug,
  }}
  asLink={false}
- locale={lang}
  />
- <ShareOnSocial lang={lang} articleUrl={articleUrl} articleTitle={title} />
+ <ShareOnSocial articleUrl={articleUrl} articleTitle={title} />
  {article.content && (
  <section className="flex w-full flex-col pt-8">
  <RichText references={initialQuiz ? [initialQuiz] : []} raw={article.content.raw} />
  </section>
  )}
  </article>
- <RecommendedArticles id={article.id} lang={lang} />
+ <NextIntlClientProvider locale={lang}>
+ <RecommendedArticles id={article.id} />
+ </NextIntlClientProvider>
  </>
  )
 }

src/app/[lang]/category/[slug]/page.tsx

@@ -9,6 +9,6 @@ export async function generateMetadata({ params: { slug } }: ArticlePageProps):
  return getMatadataObj({ title: `Category - ${slug}` })
 }
 
-export default async function Web({ params: { slug, lang } }: ArticlePageProps) {
- return <CategoryArticles category={slug} locale={lang} />
+export default async function Web({ params: { slug } }: ArticlePageProps) {
+ return <CategoryArticles category={slug} />
 }

src/app/[lang]/layout.tsx

@@ -1,3 +1,5 @@
+import { NextIntlClientProvider } from "next-intl"
+import { unstable_setRequestLocale } from "next-intl/server"
 import { Footer } from "@/components/Footer/Footer"
 import { Navigation } from "@/components/Navigation/Navigation"
 import { env } from "@/env.mjs"
@@ -6,6 +8,7 @@ import "@/styles/tailwind.css"
 import { getNavigation } from "@/lib/client"
 import { GoogleAnalytics } from "../GoogleAnalytics"
 import Providers from "../Providers"
+import { notFound } from "next/navigation"
 
 export async function generateMetadata({ params }: { params: { lang: Locale } }) {
  const locale = params.lang ?? i18n.defaultLocale
@@ -34,6 +37,10 @@ export async function generateMetadata({ params }: { params: { lang: Locale } })
 
 export default async function Layout({ children, params }: { children: React.ReactNode; params: { lang?: Locale } }) {
  const locale = params.lang ?? i18n.defaultLocale
+ const isValidLocale = i18n.locales.some((cur) => cur === locale)
+ if (!isValidLocale) notFound()
+ unstable_setRequestLocale(locale)
+
  const { navigation, footer } = await getNavigation(locale)
 
  return (
@@ -43,12 +50,14 @@ export default async function Layout({ children, params }: { children: React.Rea
  <body className="flex min-h-screen flex-col items-center ">
  <div className="z-50 flex w-full justify-center border-b bg-white">
  <nav className="flex w-full max-w-[1200px] items-center justify-end gap-4 py-4">
- <Navigation navigation={navigation} locale={locale} />
+ <NextIntlClientProvider locale={locale}>
+ <Navigation navigation={navigation} />
+ </NextIntlClientProvider>
  </nav>
  </div>
 
  <main className="mx-auto flex w-full max-w-[1200px] flex-1 flex-col px-4 pb-16">{children}</main>
- <Footer footer={footer} lang={locale} />
+ <Footer footer={footer} />
  </body>
  </Providers>
  </html>

src/app/[lang]/page.tsx

@@ -1,4 +1,7 @@
 import { Metadata } from "next"
+import { unstable_setRequestLocale } from "next-intl/server"
+import { hygraphArticleToCardProps } from "@/components/ArticleCard/ArticleCard"
+import { HeroArticleCard } from "@/components/ArticleCard/HeroArticleCard"
 import { HighlightedArticles } from "@/components/HighlightedArticles/HighlightedArticles"
 import { HighlightedCategoryArticles } from "@/components/HighlightedCategoryArticles/HighlightedCategoryArticles"
 import { RecentArticles } from "@/components/RecentArticles/RecentArticles"
@@ -7,15 +10,11 @@ import { TrendingArticles } from "@/components/TrendingArticles/TrendingArticles
 import { i18n, Locale } from "@/i18n/i18n"
 import { getHomepage, getHomepageMetadata } from "@/lib/client"
 import { getMatadataObj } from "@/utils/getMetadataObj"
-import { hygraphArticleToCardProps } from "@/components/ArticleCard/ArticleCard"
-import { HeroArticleCard } from "@/components/ArticleCard/HeroArticleCard"
 
 export const dynamicParams = false
 
-export async function generateStaticParams() {
- return i18n.locales.map((locale) => ({
- lang: locale,
- }))
+export function generateStaticParams() {
+ return i18n.locales.map((lang) => ({ lang }))
 }
 
 export async function generateMetadata({ params }: { params: { lang: Locale } }): Promise<Metadata | null> {
@@ -24,35 +23,28 @@ export async function generateMetadata({ params }: { params: { lang: Locale } })
 }
 
 export default async function Web({ params }: { params: { lang: Locale } }) {
+ unstable_setRequestLocale(params.lang)
  const homepage = await getHomepage(params.lang)
 
  return (
  <>
- {homepage.marketStock?.data && (
- <div className="flex w-full justify-end">
- <StockDisplay quotes={homepage.marketStock?.data} />
- </div>
- )}
+ {homepage.marketStock?.data && <StockDisplay quotes={homepage.marketStock?.data} />}
 
- {homepage.heroArticle && (
- <HeroArticleCard article={hygraphArticleToCardProps(homepage.heroArticle)} locale={params.lang} asLink />
- )}
- <TrendingArticles locale={params.lang} title={homepage.trendingSectionTitle ?? "Trending articles"} />
+ {homepage.heroArticle && <HeroArticleCard article={hygraphArticleToCardProps(homepage.heroArticle)} asLink />}
+ <TrendingArticles title={homepage.trendingSectionTitle ?? "Trending articles"} />
  {homepage.highlightedArticles && (
  <HighlightedArticles
- locale={params.lang}
  title={homepage.highlightedSectionTitle ?? "Our picks"}
  articles={homepage.highlightedArticles}
  />
  )}
  {homepage.highlightedCategory && (
  <HighlightedCategoryArticles
- locale={params.lang}
  title={homepage.highlightedCategoryTitle ?? homepage.highlightedCategory.title}
  categoryId={homepage.highlightedCategory.id}
  />
  )}
- <RecentArticles locale={params.lang} title={homepage.recentSectionTitle ?? "Recent articles"} />
+ <RecentArticles title={homepage.recentSectionTitle ?? "Recent articles"} />
  </>
  )
 }

src/components/ArticleCard/ArticleCard.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image"
 import Link from "next/link"
-import { Locale } from "@/i18n/i18n"
+import { useLocale } from "@/i18n/i18n"
 import { cn } from "@/utils/cn"
 import { ArticlePublishDetails } from "./ArticlePublishDetails"
 import { Tag } from "./Buttons/Tag"
@@ -21,7 +21,6 @@ type ArticleCardProps = {
  }
  tagsPosition?: "over" | "under"
  orientation?: "vertical" | "horizontal"
- locale: Locale
  lines?: "1" | "2" | "3"
  isMain?: boolean
  imageClassName?: string
@@ -53,10 +52,10 @@ export function ArticleCard({
  tagsPosition = "under",
  orientation = "vertical",
  lines = "2",
- locale,
  isMain = false,
  imageClassName,
 }: ArticleCardProps) {
+ const locale = useLocale()
  const mainTag = tags?.[0]
  return (
  <Link href={`/${locale}/article/${slug}`} hrefLang={locale} className="w-full">
@@ -156,7 +155,6 @@ export function ArticleCard({
  author={author.name}
  publicationDate={publicationDate}
  variant="light"
- lang={locale}
  />
  </div>
  </div>

src/components/ArticleCard/ArticlePublishDetails.tsx

@@ -1,5 +1,5 @@
 import Image from "next/image"
-import { Locale } from "@/i18n/i18n"
+import { useLocale } from "@/i18n/i18n"
 import { cn } from "@/utils/cn"
 import { formatDate } from "@/utils/formatDate"
 
@@ -9,7 +9,6 @@ type ArticlePublishDetailsProps = {
  publicationDate: string | null | Date
  imageUrl?: string
  variant?: "dark" | "light"
- lang: Locale
 }
 
 export function ArticlePublishDetails({
@@ -18,8 +17,8 @@ export function ArticlePublishDetails({
  imageUrl,
  variant = "dark",
  className = "",
- lang,
 }: ArticlePublishDetailsProps) {
+ const locale = useLocale()
  return (
  <div
  className={cn(
@@ -32,7 +31,7 @@ export function ArticlePublishDetails({
  >
  {publicationDate && (
  <>
- <p>{formatDate(publicationDate, lang)}</p>
+ <p>{formatDate(publicationDate, locale)}</p>
  <p>|</p>
  </>
  )}

src/components/ArticleCard/HeroArticleCard.tsx

@@ -1,7 +1,7 @@
 import Image from "next/image"
 import Link from "next/link"
 import { ReactNode } from "react"
-import { Locale } from "@/i18n/i18n"
+import { useLocale } from "@/i18n/i18n"
 import { ArticlePublishDetails } from "./ArticlePublishDetails"
 import { Tag } from "./Buttons/Tag"
 
@@ -19,7 +19,6 @@ type HeroArticleCardProps = {
  slug: string
  }
  asLink?: boolean
- locale: Locale
 }
 
 type HeroWrapperProps = {
@@ -39,9 +38,10 @@ function HeroWrapper({ link, linkProps, children }: HeroWrapperProps) {
 
 export function HeroArticleCard({
  article: { imageUrl, imageAlt, title, publicationDate, author, tags, slug },
- locale,
  asLink = true,
 }: HeroArticleCardProps) {
+ const locale = useLocale()
+
  return (
  <HeroWrapper link={asLink} linkProps={{ href: `/${locale}/article/${slug}`, hrefLang: locale }}>
  <article className=" w-full overflow-hidden rounded-xl text-white">
@@ -76,7 +76,6 @@ export function HeroArticleCard({
  imageUrl={author.imageUrl}
  author={author.name}
  publicationDate={publicationDate}
- lang={locale}
  />
  </div>
  </div>

src/components/ArticlesGrid/ArticlesGrid.tsx

@@ -1,4 +1,3 @@
-import { Locale } from "@/i18n/i18n"
 import { cn } from "@/utils/cn"
 import { ArticleCard, hygraphArticleToCardProps } from "../ArticleCard/ArticleCard"
 
@@ -28,12 +27,11 @@ type Articles = Article[] | undefined | null
 
 type ArtilcesGridProps = {
  articles: Articles
- locale: Locale
  cardsOrientation?: "vertical" | "horizontal"
  className?: string
 }
 
-export function ArticlesGrid({ articles, locale, cardsOrientation, className }: ArtilcesGridProps) {
+export function ArticlesGrid({ articles, cardsOrientation, className }: ArtilcesGridProps) {
  if (!articles || articles.length === 0) return <p>No Articles Found!</p>
  return (
  <div className={cn(`grid gap-8 md:grid-cols-3`, className)}>
@@ -44,7 +42,6 @@ export function ArticlesGrid({ articles, locale, cardsOrientation, className }:
  key={`trending-${article.id}`}
  article={hygraphArticleToCardProps(article)}
  tagsPosition="under"
- locale={locale}
  />
  )
  })}