Upgrade template to Next.js 14 (#2290)

sumup-oss · Nov 10, 2023 · 7a2c36d · 7a2c36d · vercel · Nov 10, 2023
1 parent 960ad6c
commit 7a2c36d
Show file tree

Hide file tree

Showing 19 changed files with 204 additions and 530 deletions.
diff --git a/.changeset/odd-bobcats-report.md b/.changeset/odd-bobcats-report.md
@@ -0,0 +1,5 @@
+---
+'@sumup/cna-template': major
+---
+
+Upgraded to Next.js 14 and migrated to the `/app` folder.
diff --git a/packages/cna-template/template/.env b/packages/cna-template/template/.env
diff --git a/packages/cna-template/template/app/layout.tsx b/packages/cna-template/template/app/layout.tsx
@@ -0,0 +1,42 @@
+import type { Metadata, Viewport } from 'next';
+
+import '@sumup/design-tokens/light.css';
+import '@sumup/circuit-ui/styles.css';
+
+import { PreloadResources } from './preload-resources';
+
+export const metadata: Metadata = {
+  title: {
+    template: '%s | SumUp',
+    default: 'SumUp',
+  },
+  icons: {
+    icon: 'https://static.sumup.com/favicons/favicon-32x32.png',
+    shortcut: 'https://static.sumup.com/favicons/favicon.ico',
+    apple: 'https://static.sumup.com/favicons/apple-touch-icon.png',
+  },
+  manifest: 'https://static.sumup.com/favicons/site.webmanifest',
+};
+
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  viewportFit: 'cover',
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: '#fff' },
+    { media: '(prefers-color-scheme: dark)', color: '#000' },
+  ],
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <PreloadResources />
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/...-template/template/pages/index.module.css → ...cna-template/template/app/page.module.css b/...-template/template/pages/index.module.css → ...cna-template/template/app/page.module.css
@@ -1,3 +1,31 @@
+.grid {
+  display: grid;
+  grid-template-rows: 1fr auto;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+}
+
+.main {
+  max-width: 1000px;
+  margin: var(--cui-spacings-tera);
+}
+
+.footer {
+  display: flex;
+  grid-row-start: 2;
+  grid-row-end: 3;
+  justify-content: center;
+  margin: var(--cui-spacings-tera);
+}
+
+.logo {
+  display: block;
+  width: 120px;
+  color: var(--cui-fg-normal);
+}
+
+
 .intro {
   margin-top: var(--cui-spacings-peta);
   margin-bottom: var(--cui-spacings-peta);

diff --git a/...ges/cna-template/template/pages/index.tsx → packages/cna-template/template/app/page.tsx b/...ges/cna-template/template/pages/index.tsx → packages/cna-template/template/app/page.tsx
@@ -1,24 +1,25 @@
+import type { Metadata } from 'next';
 import { Title, BodyLarge } from '@sumup/circuit-ui';
+import { SumUpLogo } from '@sumup/icons';
 
-import { RootLayout } from '../layouts/Root';
-import { Meta } from '../components/Meta';
 import { DocCard } from '../components/DocCard';
 
-import styles from './index.module.css';
+import styles from './page.module.css';
 
-const title = 'Welcome to Circuit UI + Next.js';
+export const metadata: Metadata = {
+  title: 'Welcome to Circuit UI + Next.js',
+};
 
 export default function Page() {
   return (
-    <>
-      <Meta title={title} path="/" />
-      <RootLayout>
+    <div className={styles.grid}>
+      <main className={styles.main}>
         <Title as="h1" size="three">
-          {title}
+          {metadata.title as string}
         </Title>
 
         <BodyLarge className={styles.intro}>
-          Get started by editing <code>pages/index.tsx</code>
+          Get started by editing <code>app/page.tsx</code>
         </BodyLarge>
 
         <div className={styles.cards}>
@@ -40,7 +41,17 @@ export default function Page() {
             href="https://github.com/sumup-oss/foundry"
           />
         </div>
-      </RootLayout>
-    </>
+      </main>
+      <footer className={styles.footer}>
+        <a
+          href="https://sumup.com"
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label="Open SumUp's homepage in a new tab"
+        >
+          <SumUpLogo className={styles.logo} />
+        </a>
+      </footer>
+    </div>
   );
 }
diff --git a/packages/cna-template/template/app/preload-resources.tsx b/packages/cna-template/template/app/preload-resources.tsx
@@ -0,0 +1,16 @@
+'use client';
+
+import ReactDOM from 'react-dom';
+
+export function PreloadResources() {
+  ReactDOM.preload(
+    'https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff2',
+    { as: 'font' },
+  );
+  ReactDOM.preload(
+    'https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff2',
+    { as: 'font' },
+  );
+
+  return null;
+}
diff --git a/packages/cna-template/template/components/Meta/Meta.spec.tsx b/packages/cna-template/template/components/Meta/Meta.spec.tsx
diff --git a/packages/cna-template/template/components/Meta/Meta.tsx b/packages/cna-template/template/components/Meta/Meta.tsx
diff --git a/packages/cna-template/template/components/Meta/index.ts b/packages/cna-template/template/components/Meta/index.ts
diff --git a/packages/cna-template/template/layouts/Root.module.css b/packages/cna-template/template/layouts/Root.module.css