feat: add outer layout

aszx87410 · Aug 31, 2023 · 491580f · 491580f
1 parent ff9f2b0
commit 491580f
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 11 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 .DS_Store
-node_modules/
+node_modules/
+.next/
diff --git a/src/app/Heading.tsx b/src/app/Heading.tsx
@@ -0,0 +1,13 @@
+'use client';
+
+import useTranslation from 'next-translate/useTranslation'
+
+export default function Heading() {
+ const { t } = useTranslation('common')
+
+ return (
+ <div>
+ <h1>Client: {t`layout-title`}</h1>
+ </div>
+ )
+}
diff --git a/src/app/[lang]/layout.tsx b/src/app/[lang]/layout.tsx
@@ -9,16 +9,11 @@ export default function RootLayout({
 }) {
  const { t, lang } = useTranslation('common')
 
- // Redirect to default locale if lang is not supported. /second-page -> /en/second-page
- if (!i18n.locales.includes(lang)) redirect(`/${i18n.defaultLocale}/${lang}`)
-
  return (
- <html lang={lang}>
- <head />
- <body>
- <h1>{t`layout-title`}</h1>
- {children}
- </body>
- </html>
+ <div>
+ ==== inner layout ====
+ <h2>{t`layout-title`}</h2>
+ {children}
+ </div>
  )
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -0,0 +1,27 @@
+import useTranslation from 'next-translate/useTranslation'
+import i18n from '../../i18n'
+import { redirect } from 'next/navigation'
+import Heading from './Heading'
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ const { t, lang } = useTranslation('common')
+
+ // Redirect to default locale if lang is not supported. /second-page -> /en/second-page
+ if (!i18n.locales.includes(lang)) redirect(`/${i18n.defaultLocale}/${lang}`)
+
+ return (
+ <html lang={lang}>
+ <head />
+ <body>
+ ==== outer layout ===
+ <h1>{t`layout-title`}</h1>
+ <Heading />
+ {children}
+ </body>
+ </html>
+ )
+}