Starter ready for internationalization;

matteofrana · matteofrana · commit 3560297999b4 · 2021-10-01T15:58:52.000+02:00
More robust page fetch
diff --git a/components/errorNoPage.tsx b/components/errorNoPage.tsx
@@ -0,0 +1,14 @@
+const ErrorNoPage = () => {
+  return (
+    <div className="max-w-5xl mx-auto px-6 py-20 text-gray-600">
+      <h1 className="text-2xl text-red-600 font-semibold mb-8">
+        Page not found
+      </h1>
+      <p className="mb-6">
+        React Bricks cannot find a page for the specified slug.
+      </p>
+    </div>
+  )
+}
+
+export default ErrorNoPage
diff --git a/next.config.js b/next.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  i18n: {
+    locales: ['en'], // Add your languages here
+    defaultLocale: 'en',
+    localeDetection: false,
+  },
+}
diff --git a/pages/[slug].tsx b/pages/[slug].tsx
@@ -12,24 +12,31 @@ import { GetStaticProps, GetStaticPaths } from 'next'
 
 import config from '../react-bricks/config'
 import Layout from '../components/layout'
+import ErrorNoPage from '../components/errorNoPage'
 
 interface PageProps {
   page: types.Page
+  error: string
 }
 
-const Page: React.FC<PageProps> = ({ page }) => {
+const Page: React.FC<PageProps> = ({ page, error }) => {
   // Clean the received content
   // Removes unknown or not allowed bricks
   const { pageTypes, bricks } = useContext(ReactBricksContext)
-  const pageOk = cleanPage(page, pageTypes, bricks)
+  const pageOk = page ? cleanPage(page, pageTypes, bricks) : null
 
   return (
     <Layout>
-      <Head>
-        <title>{page.meta.title}</title>
-        <meta name="description" content={page.meta.description} />
-      </Head>
-      <PageViewer page={pageOk} />
+      {pageOk && (
+        <>
+          <Head>
+            <title>{page.meta.title}</title>
+            <meta name="description" content={page.meta.description} />
+          </Head>
+          <PageViewer page={pageOk} />
+        </>
+      )}
+      {error === 'NOPAGE' && <ErrorNoPage />}
     </Layout>
   )
 }
@@ -39,20 +46,33 @@ export const getStaticProps: GetStaticProps = async (context) => {
     return { props: { error: 'NOKEYS' } }
   }
   const { slug } = context.params
-  const page = await fetchPage(slug.toString(), config.apiKey)
-  return { props: { page } }
+  try {
+    const page = await fetchPage(slug.toString(), config.apiKey, context.locale)
+    return { props: { page } }
+  } catch {
+    return { props: { error: 'NOPAGE' } }
+  }
 }
 
-export const getStaticPaths: GetStaticPaths = async () => {
+export const getStaticPaths: GetStaticPaths = async (context) => {
   if (!config.apiKey) {
     return { paths: [], fallback: false }
   }
 
   const allPages = await fetchPages(config.apiKey)
 
-  const paths = allPages.map((page) => ({
-    params: { slug: page.slug },
-  }))
+  const paths = allPages
+    .map((page) =>
+      page.translations
+        .filter(
+          (translation) => context.locales.indexOf(translation.language) > -1
+        )
+        .map((translation) => ({
+          params: { slug: translation.slug },
+          locale: translation.language,
+        }))
+    )
+    .flat()
 
   return { paths, fallback: false }
 }
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -4,18 +4,18 @@ import {
   PageViewer,
   fetchPage,
   cleanPage,
-  types
+  types,
 } from 'react-bricks'
 import Head from 'next/head'
-import { GetStaticProps } from 'next'
+import { GetStaticProps, GetStaticPaths } from 'next'
 
 import config from '../react-bricks/config'
 import Layout from '../components/layout'
 import ErrorNoKeys from '../components/errorNoKeys'
 import ErrorNoHomePage from '../components/errorNoHomePage'
 
 interface HomeProps {
-  page: types.Page,
+  page: types.Page
   error: string
 }
 
@@ -43,12 +43,12 @@ const Home: React.FC<HomeProps> = ({ page, error }) => {
   )
 }
 
-export const getStaticProps: GetStaticProps = async () => {
+export const getStaticProps: GetStaticProps = async (context) => {
   if (!config.apiKey) {
     return { props: { error: 'NOKEYS' } }
   }
   try {
-    const page = await fetchPage('home', config.apiKey)
+    const page = await fetchPage('home', config.apiKey, context.locale)
     return { props: { page } }
   } catch {
     return { props: { error: 'NOPAGE' } }
