Multilingual (i18n) Blog Part 1

hlog-kr · Sep 30, 2023 · b244525 · b244525
1 parent 28d6de4
commit b244525
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 4 deletions.
diff --git a/components/LanguageSwitch.js b/components/LanguageSwitch.js
@@ -0,0 +1,28 @@
+import { useRouter } from 'next/router'
+import Link from 'next/link'
+
+const LanguageSwitch = () => {
+  const { locales, locale, asPath } = useRouter()
+
+  if (!locales) {
+    return null
+  }
+
+  return (
+    <div className="rounded bg-gray-200 py-2 dark:bg-gray-800">
+      {locales.map((item) => (
+        <Link key={item} locale={item} href={asPath}>
+          <a
+            className={`p-2 font-medium text-gray-900 dark:text-gray-100 ${
+              item === locale ? 'rounded bg-gray-400 dark:bg-gray-600' : ''
+            }`}
+          >
+            {item}
+          </a>
+        </Link>
+      ))}
+    </div>
+  )
+}
+
+export default LanguageSwitch
diff --git a/components/LayoutWrapper.js b/components/LayoutWrapper.js
@@ -7,6 +7,7 @@ import Footer from './Footer'
 import MobileNav from './MobileNav'
 import ThemeSwitch from './ThemeSwitch'
 import GAdsBanner from '@/components/GAdsBanner'
+import LanguageSwitch from '@/components/LanguageSwitch'
 
 const LayoutWrapper = ({ children }) => {
   return (
@@ -41,6 +42,7 @@ const LayoutWrapper = ({ children }) => {
                 </Link>
               ))}
             </div>
+            <LanguageSwitch />
             <ThemeSwitch />
             <MobileNav />
           </div>

diff --git a/next-i18next.config.js b/next-i18next.config.js
@@ -0,0 +1,7 @@
+/** @type {import('next-i18next').UserConfig} */
+module.exports = {
+  i18n: {
+    defaultLocale: 'ko',
+    locales: ['ko', 'en'],
+  },
+}
diff --git a/next.config.js b/next.config.js
@@ -1,3 +1,5 @@
+const { i18n } = require('./next-i18next.config')
+
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 })
@@ -53,6 +55,7 @@ const securityHeaders = [
 ]
 
 module.exports = withBundleAnalyzer({
+  i18n,
   reactStrictMode: true,
   pageExtensions: ['js', 'jsx', 'md', 'mdx'],
   eslint: {

diff --git a/pages/_app.js b/pages/_app.js
@@ -12,11 +12,12 @@ import siteMetadata from '@/data/siteMetadata'
 import Analytics from '@/components/analytics'
 import LayoutWrapper from '@/components/LayoutWrapper'
 import { ClientReload } from '@/components/ClientReload'
+import { appWithTranslation } from 'next-i18next'
 
 const isDevelopment = process.env.NODE_ENV === 'development'
 const isSocket = process.env.SOCKET
 
-export default function App({ Component, pageProps }) {
+function App({ Component, pageProps }) {
   return (
     <ThemeProvider attribute="class" defaultTheme={siteMetadata.theme}>
       <Head>
@@ -30,3 +31,5 @@ export default function App({ Component, pageProps }) {
     </ThemeProvider>
   )
 }
+
+export default appWithTranslation(App)
diff --git a/pages/blog.js b/pages/blog.js
@@ -2,29 +2,39 @@ import { getAllFilesFrontMatter } from '@/lib/mdx'
 import siteMetadata from '@/data/siteMetadata'
 import ListLayout from '@/layouts/ListLayout'
 import { PageSEO } from '@/components/SEO'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { useTranslation } from 'next-i18next'
 
 export const POSTS_PER_PAGE = 5
 
-export async function getStaticProps() {
+export async function getStaticProps({ locale }) {
   const posts = await getAllFilesFrontMatter('blog')
   const initialDisplayPosts = posts.slice(0, POSTS_PER_PAGE)
   const pagination = {
     currentPage: 1,
     totalPages: Math.ceil(posts.length / POSTS_PER_PAGE),
   }
 
-  return { props: { initialDisplayPosts, posts, pagination } }
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ['common'])),
+      initialDisplayPosts,
+      posts,
+      pagination,
+    },
+  }
 }
 
 export default function Blog({ posts, initialDisplayPosts, pagination }) {
+  const { t } = useTranslation('common')
   return (
     <>
       <PageSEO title={`Blog - ${siteMetadata.author}`} description={siteMetadata.description} />
       <ListLayout
         posts={posts}
         initialDisplayPosts={initialDisplayPosts}
         pagination={pagination}
-        title="All Posts"
+        title={t('all')}
       />
     </>
   )

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -0,0 +1,3 @@
+{
+  "all": "All Posts"
+}
diff --git a/public/locales/ko/common.json b/public/locales/ko/common.json
@@ -0,0 +1,3 @@
+{
+  "all": "전체 글"
+}