SEO를 layout에서 분리

Author: constmoon

frontend/components/layout/Layout.tsx

@@ -28,34 +28,9 @@ const Body = styled.div`
 `
 
 const Layout = (props: LayoutProps) => {
-    const { t } = useTranslation()
-
-    const title =
-        props.pageName !== ''
-            ? `${t(`pageTitle:${props.pageName}`)} : ${t(`label:siteTitle`)}`
-            : `${t(`label:siteTitle`)}`
-
-    const description = `${t(`label:pyconkrTitle`)}: ${t(`label:pyconkrDate`)}`
-
     // TODO: locale을 context로 관리
     return (
         <>
-            <NextSeo
-                title={title}
-                description={description}
-                openGraph={{
-                    type: 'website',
-                    url: 'https://pycon.kr',
-                    title: title,
-                    site_name: title,
-                    description: description,
-                    images: [
-                        {
-                            url: `https://2022.pycon.kr/images/og-temp.jpg`
-                        }
-                    ]
-                }}
-            />
             <NavBarMobile locale={props.locale} />
             <NavBar locale={props.locale} />
             <Container>

frontend/pages/_app.tsx

@@ -7,6 +7,7 @@ import { I18nextProvider, useTranslation } from 'react-i18next'
 import { ThemeProvider } from 'styled-components'
 import '../assets/styles/global.css'
 import Theme from '../assets/styles/theme'
+import { NextSeo } from 'next-seo'
 
 const App = ({
     Component,
@@ -17,11 +18,32 @@ const App = ({
     const { t } = useTranslation()
 
     const pageName = pageProps?.title ?? ''
+    const pageTitle =
+        pageName !== ''
+            ? `${t(`pageTitle:${pageName}`)} : ${t(`label:siteTitle`)}`
+            : `${t(`label:siteTitle`)}`
+    const description = `${t(`label:pyconkrTitle`)}: ${t(`label:pyconkrDate`)}`
 
     return (
         <>
             <I18nextProvider i18n={i18n}>
                 <ThemeProvider theme={Theme}>
+                    <NextSeo
+                        title={pageTitle}
+                        description={description}
+                        openGraph={{
+                            type: 'website',
+                            url: 'https://pycon.kr',
+                            title: pageTitle,
+                            site_name: pageTitle,
+                            description: description,
+                            images: [
+                                {
+                                    url: `https://2022.pycon.kr/images/og-temp.jpg`
+                                }
+                            ]
+                        }}
+                    />
                     <Layout locale={locale} pageName={pageName}>
                         <Component pageName={pageName} {...pageProps} />
                     </Layout>