From 30948ca1305b0de9bc10750967faa776d8819894 Mon Sep 17 00:00:00 2001
From: Andras Lassu <andras.lassu@develops.hu>
Date: Sun, 25 Feb 2024 14:44:30 +0100
Subject: [PATCH 1/2] chore: bump nodejs minimum required version to 18

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6907035d..f565b633 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
   "license": "MIT",
   "private": true,
   "engines": {
-    "node": ">=14"
+    "node": ">=18"
   },
   "scripts": {
     "lint": "next lint --fix --dir app",

From 93b38854e92861d4c2f57d88d96e039dbe22541e Mon Sep 17 00:00:00 2001
From: Andras Lassu <andras.lassu@develops.hu>
Date: Sun, 25 Feb 2024 14:45:46 +0100
Subject: [PATCH 2/2] fix: use `metadata` export instead of deprecated
 `head.jsx` file

---
 app/head.jsx   | 60 --------------------------------------------------
 app/layout.jsx | 50 +++++++++++++++++++++++++++++++++++++++--
 2 files changed, 48 insertions(+), 62 deletions(-)
 delete mode 100644 app/head.jsx

diff --git a/app/head.jsx b/app/head.jsx
deleted file mode 100644
index 089b765e..00000000
--- a/app/head.jsx
+++ /dev/null
@@ -1,60 +0,0 @@
-const title = 'React Three Next Starter'
-const url = 'https://react-three-next.vercel.app/'
-const description = 'The easiest and fastest way to create a 3D website using React Three Fiber and NextJS'
-const author = 'Author'
-const twitter = '@pmndrs'
-
-export default function Head() {
-  return (
-    <>
-      {/* Recommended Meta Tags */}
-      <meta charSet='utf-8' />
-      <meta name='language' content='english' />
-      <meta httpEquiv='content-type' content='text/html' />
-      <meta name='author' content={author} />
-      <meta name='designer' content={author} />
-      <meta name='publisher' content={author} />
-
-      {/* Search Engine Optimization Meta Tags */}
-      <title>{title}</title>
-      <meta name='description' content={description} />
-      <meta
-        name='keywords'
-        content='Software Engineer,Product Manager,Project Manager,Data Scientist,Computer Scientist'
-      />
-      <meta name='robots' content='index,follow' />
-      <meta name='distribution' content='web' />
-      {/* 
-      Facebook Open Graph meta tags
-        documentation: https://developers.facebook.com/docs/sharing/opengraph */}
-      <meta property='og:title' content={title} />
-      <meta property='og:type' content='site' />
-      <meta property='og:url' content={url} />
-      <meta property='og:image' content={'/icons/share.png'} />
-      <meta property='og:site_name' content={title} />
-      <meta property='og:description' content={description} />
-
-      <link rel='apple-touch-icon' href='/icons/apple-touch-icon.png' />
-      <link rel='apple-touch-icon' sizes='16x16' href='/icons/favicon-16x16.png' />
-      <link rel='apple-touch-icon' sizes='32x32' href='/icons/favicon-32x32.png' />
-      <link rel='apple-touch-icon' sizes='180x180' href='/icons/apple-touch-icon.png' />
-      <link rel='manifest' href='/manifest.json' />
-      <link rel='mask-icon' color='#000000' href='/icons/safari-pinned-tab.svg' />
-      <link rel='apple-touch-startup-image' href='/startup.png' />
-
-      {/* Meta Tags for HTML pages on Mobile */}
-      {/* <meta name="format-detection" content="telephone=yes"/>
-        <meta name="HandheldFriendly" content="true"/>  */}
-      <meta name='viewport' content='width=device-width, minimum-scale=1, initial-scale=1.0' />
-      <meta name='theme-color' content='#000' />
-      <link rel='shortcut icon' href='/icons/apple-touch-icon.png' />
-
-      {/* 
-      Twitter Summary card
-        documentation: https://dev.twitter.com/cards/getting-started
-        Be sure validate your Twitter card markup on the documentation site. */}
-      <meta name='twitter:card' content='summary' />
-      <meta name='twitter:site' content={twitter} />
-    </>
-  )
-}
diff --git a/app/layout.jsx b/app/layout.jsx
index b121862d..3c7a812d 100644
--- a/app/layout.jsx
+++ b/app/layout.jsx
@@ -1,9 +1,55 @@
 import { Layout } from '@/components/dom/Layout'
 import '@/global.css'
 
+const title = 'React Three Next Starter'
+const url =  process.env.NODE_ENV ==="development" ? 'http://localhost:3000' : 'https://react-three-next.vercel.app'
+const description = 'The easiest and fastest way to create a 3D website using React Three Fiber and NextJS'
+const author = 'Poimandres'
+const twitter = '@pmndrs'
+
+/**
+ * @type {import('next').Viewport}
+ */
+export const viewport = {
+  themeColor: 'black',
+}
+
+/**
+ * @type {import('next').Metadata}
+ */
 export const metadata = {
-  title: 'Next.js + Three.js',
-  description: 'A minimal starter for Nextjs + React-three-fiber and Threejs.',
+  title: title,
+  description: description,
+  authors: [{ name: author, url: 'https://docs.pmnd.rs' }],
+  publisher: author,
+  keywords: 'Software Engineer,Product Manager,Project Manager,Data Scientist,Computer Scientist',
+  robots: 'index,follow',
+  metadataBase: url,
+  openGraph: {
+    title: title,
+    type: 'website',
+    url: url,
+    images: [{ url: '/icons/share.png', width: 800, height: 800 }],
+    siteName: title,
+    description: description,
+  },
+  twitter: {
+    card: 'summary',
+    site: twitter,
+  },
+  manifest: '/manifest.json',
+  formatDetection: { email: true, telephone: true },
+  icons: {
+    icon: [{ url: '/icons/favicon.ico' }, { url: '/icons/favicon-32x32.png', type: 'image/png' }],
+    shortcut: ['/icons/apple-touch-icon.png'],
+    apple: [
+      { url: '/icons/apple-touch-icon.png' },
+      { url: '/icons/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
+      { url: '/icons/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
+      { url: '/icons/apple-touch-icon.png', sizes: '180x180', type: 'image/png' },
+    ],
+    other: [{ rel: 'mask-icon', url: '/icons/safari-pinned-tab.svg', color: '#000000' }],
+  },
 }
 
 export default function RootLayout({ children }) {