Update CMS contentstack commerce example to the App Router (#842)

Co-authored-by: Lee Robinson <[email protected]>
vercel · Dec 25, 2023 · 40a32c1 · 40a32c1 · vercel · Dec 25, 2023
1 parent 3c5d318
commit 40a32c1
Show file tree

Hide file tree

Showing 54 changed files with 1,573 additions and 1,968 deletions.
diff --git a/solutions/cms-contentstack-commerce/.gitignore b/solutions/cms-contentstack-commerce/.gitignore
@@ -1,40 +1,42 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# dependencies
+# Dependencies
 /node_modules
 /.pnp
 .pnp.js
 
-# testing
+# Testing
 /coverage
 
-# next.js
+# Next.js
 /.next/
 /out/
+next-env.d.ts
 
-# production
-/build
+# Production
+build
+dist
 
-# misc
+# Misc
 .DS_Store
 *.pem
 
-# debug
+# Debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# local env files
+# Local ENV files
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 
-# vercel
+# Vercel
 .vercel
 
 # Turborepo
 .turbo
 
 # typescript
-*.tsbuildinfo
+*.tsbuildinfo
diff --git a/solutions/cms-contentstack-commerce/app/[lang]/layout.tsx b/solutions/cms-contentstack-commerce/app/[lang]/layout.tsx
@@ -0,0 +1,17 @@
+/**
+ * We use a nested layout to define all the possible languages supported by all pages after /[lang]
+ */
+
+import type { ReactNode } from 'react'
+import { LOCALES } from '@lib/i18n'
+
+// Only the known locales are supported
+export const dynamicParams = false
+
+export async function generateStaticParams() {
+  return LOCALES.map((lang) => ({ lang }))
+}
+
+export default function DashboardLayout({ children }: { children: ReactNode }) {
+  return <>{children}</>
+}
diff --git a/solutions/cms-contentstack-commerce/app/[lang]/page.tsx b/solutions/cms-contentstack-commerce/app/[lang]/page.tsx
@@ -0,0 +1,61 @@
+import type { Metadata } from 'next'
+import { getEntry } from '@lib/contentstack'
+import { Navbar } from '@components/ui/navbar'
+import { Footer } from '@components/ui/footer'
+import { UIComponent } from '@components/ui/ui-component'
+import { Container } from '@components/ui/container'
+
+type Props = {
+  params: { lang: string }
+}
+
+async function getHomeEntry(locale: string) {
+  const entry = await getEntry(
+    {
+      contentType: 'home_page',
+      entryId: 'blt5c760b6ce70ae18b',
+      locale,
+    },
+    {
+      next: { revalidate: 3600 }, // revalidate every hour
+    }
+  )
+  if (!entry) throw new Error('Home entry not found')
+  return entry
+}
+
+export async function generateMetadata({
+  params: { lang },
+}: Props): Promise<Metadata> {
+  const { seo, title } = await getHomeEntry(lang)
+  return {
+    title: `${seo.title ? seo.title : title} - ${seo.description}`,
+    description: seo.description,
+  }
+}
+
+async function Page({ params: { lang } }: Props) {
+  const entry = await getHomeEntry(lang)
+  return (
+    <>
+      <Container>
+        <Navbar data={entry.header} />
+        {entry.modular_blocks.map(({ component }, i) => {
+          const { component_type, component_variant, ...rest } = component
+          return (
+            <UIComponent
+              key={`${component_type}_${i}`}
+              componentType={component_type}
+              componentVariant={component_variant}
+              data={rest}
+              priority={i < 3}
+            />
+          )
+        })}
+      </Container>
+      <Footer />
+    </>
+  )
+}
+
+export default Page
diff --git a/solutions/cms-contentstack-commerce/app/layout.tsx b/solutions/cms-contentstack-commerce/app/layout.tsx
@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react'
+import { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import '../styles/globals.css'
+
+// If loading a variable font, you don't need to specify the font weight
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'optional',
+})
+
+export const metadata: Metadata = {
+  title: 'Next.js and Contentstack',
+  description: 'Example using the Next.js App Router.',
+}
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <html className={inter.className}>
+      <head>
+        <link rel="icon" href="/favicon.ico" />
+      </head>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/...tack-commerce/components/ui/Logo/Logo.tsx → ...tstack-commerce/components/icons/Logo.tsx b/...tack-commerce/components/ui/Logo/Logo.tsx → ...tstack-commerce/components/icons/Logo.tsx
diff --git a/solutions/cms-contentstack-commerce/components/icons/index.ts b/solutions/cms-contentstack-commerce/components/icons/index.ts
@@ -1,3 +1,4 @@
+export { default as Logo } from './Logo'
 export { default as Bag } from './Bag'
 export { default as Heart } from './Heart'
 export { default as Trash } from './Trash'

diff --git a/solutions/cms-contentstack-commerce/components/ui/Avatar/Avatar.tsx b/solutions/cms-contentstack-commerce/components/ui/Avatar/Avatar.tsx
diff --git a/solutions/cms-contentstack-commerce/components/ui/Avatar/index.ts b/solutions/cms-contentstack-commerce/components/ui/Avatar/index.ts
diff --git a/solutions/cms-contentstack-commerce/components/ui/Container/Container.tsx b/solutions/cms-contentstack-commerce/components/ui/Container/Container.tsx
diff --git a/solutions/cms-contentstack-commerce/components/ui/Container/index.ts b/solutions/cms-contentstack-commerce/components/ui/Container/index.ts
diff --git a/solutions/cms-contentstack-commerce/components/ui/Footer/Footer.module.css b/solutions/cms-contentstack-commerce/components/ui/Footer/Footer.module.css
diff --git a/solutions/cms-contentstack-commerce/components/ui/Footer/index.ts b/solutions/cms-contentstack-commerce/components/ui/Footer/index.ts
diff --git a/solutions/cms-contentstack-commerce/components/ui/Grid/Grid.module.css b/solutions/cms-contentstack-commerce/components/ui/Grid/Grid.module.css
diff --git a/solutions/cms-contentstack-commerce/components/ui/Grid/Grid.tsx b/solutions/cms-contentstack-commerce/components/ui/Grid/Grid.tsx
diff --git a/solutions/cms-contentstack-commerce/components/ui/Grid/index.ts b/solutions/cms-contentstack-commerce/components/ui/Grid/index.ts
diff --git a/solutions/cms-contentstack-commerce/components/ui/Hero/Hero.module.css b/solutions/cms-contentstack-commerce/components/ui/Hero/Hero.module.css
diff --git a/solutions/cms-contentstack-commerce/components/ui/Hero/index.ts b/solutions/cms-contentstack-commerce/components/ui/Hero/index.ts