chore: migrate to next 16 and upgrade all deps

.github/workflows/action.yaml

@@ -19,7 +19,7 @@ jobs:
 
         steps:
             -   name: Check out Git repository
-                uses: actions/checkout@v2
+                uses: actions/checkout@v4
 
             -   name: Set up Node.js
                 uses: actions/setup-node@v4

.gitignore

@@ -37,3 +37,4 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
+next-env.d.ts

.nvmrc

@@ -1 +1 @@
-v20.17.0
+v24

src/pages/about.tsx → app/about/page.tsx

@@ -1,11 +1,16 @@
 import { Gallery } from '@/components/Blocks/Gallery/Gallery';
-import type { Icon } from '@/components/Blocks/IconSet/components/Icon';
+import type { IconData } from '@/components/Blocks/IconSet/components/Icon';
 import { IconSet } from '@/components/Blocks/IconSet/IconSet';
+import type { Metadata } from 'next';
 import { projects } from '@/utils/projectData';
 import styles from '@/styles/pages/About.module.scss';
 
-export default function About(): JSX.Element {
-    const teamIcons: Icon[] = [
+export const metadata: Metadata = {
+    title: 'About Us | Open SGF',
+};
+
+export default function About() {
+    const teamIcons: IconData[] = [
         {
             image: {
                 src: '/images/people/levi-zitting-headshot.jpg',
@@ -44,16 +49,13 @@ export default function About(): JSX.Element {
             <h1>About Us</h1>
             <IconSet icons={teamIcons} />
             <p className={styles.groupDescription}>
-                We are a volunteer group of designers and developers
-                out of Springfield, Missouri. We provide a forum for
-                mobile, web, and application designers and developers
-                to tackle technical problems for our community.
+                We are a volunteer group of designers and developers out of Springfield, Missouri. We provide a forum
+                for mobile, web, and application designers and developers to tackle technical problems for our
+                community.
             </p>
             <p className={styles.groupDescription}>
-                Many organizations lack the necessary funding to
-                produce quality technical solutions for their problems.
-                This group aims to close that gap by bringing people
-                together to work on these projects weekly 
+                Many organizations lack the necessary funding to produce quality technical solutions for their problems.
+                This group aims to close that gap by bringing people together to work on these projects weekly
             </p>
             <Gallery images={images} />
         </div>

src/pages/code-of-conduct.tsx → app/code-of-conduct/page.tsx

@@ -1,6 +1,10 @@
-import React from 'react';
+import type { Metadata } from 'next';
 import styles from '@/styles/pages/CodeOfConduct.module.scss';
 
+export const metadata: Metadata = {
+    title: 'Code of Conduct | Open SGF',
+};
+
 export default function CodeOfConduct() {
     return (
         <div className={styles.codeOfConduct}>
@@ -47,20 +51,24 @@ export default function CodeOfConduct() {
             </ul>
 
             <p>
-                <strong>Reporting Behaviors Inconsistent With Code of Conduct.</strong> Open SGF is a “see-something,
-                say-something” community. If you witness or are subject to any behaviors listed above or those that
-                appear inconsistent with our stated values, you can make a report in one of the following ways:
+                <strong>Reporting Behaviors Inconsistent With Code of Conduct.</strong> Open SGF is a
+                &ldquo;see-something, say-something&rdquo; community. If you witness or are subject to any behaviors
+                listed above or those that appear inconsistent with our stated values, you can make a report in one of
+                the following ways:
             </p>
 
             <ul>
                 <li>
                     Submit an anonymous report through our
                     <a href="https://docs.google.com/forms/d/e/1FAIpQLSceeSzpiXFvchwmP2gc-8RMp9mhQDm1GQ4E2KpYCNklBruZpA/viewform">
-                        “Report an Issue”
+                        &ldquo;Report an Issue&rdquo;
                     </a>
                     form
                 </li>
-                <li>Reach out to an organizer. Organizers are recognizable via the “organizers” role in Discord</li>
+                <li>
+                    Reach out to an organizer. Organizers are recognizable via the &ldquo;organizers&rdquo; role in
+                    Discord
+                </li>
             </ul>
 
             <p>

app/donate/page.tsx

@@ -0,0 +1,13 @@
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+    title: 'Donate | Open SGF',
+};
+
+export default function Donate() {
+    return (
+        <div>
+            <h1>Donate</h1>
+        </div>
+    );
+}

app/layout.tsx

@@ -0,0 +1,36 @@
+import '@/styles/globals.scss';
+import { Layout } from '@/components/Layout';
+import type { Metadata } from 'next';
+import PlausibleProvider from 'next-plausible';
+
+export const metadata: Metadata = {
+    title: {
+        default: 'Open SGF',
+        template: '%s | Open SGF',
+    },
+    icons: {
+        apple: [{ sizes: '180x180', url: '/images/favicons/apple-touch-icon.png' }],
+        icon: [
+            { sizes: '32x32', url: '/images/favicons/favicon-32x32.png' },
+            { sizes: '16x16', url: '/images/favicons/favicon-16x16.png' },
+        ],
+        shortcut: [
+            { sizes: '196x196', url: '/images/favicons/android-chrome-192x192.png' },
+            { sizes: '512x512', url: '/images/favicons/android-chrome-512x512.png' },
+        ],
+    },
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <html lang="en">
+            <body>
+                <Layout>
+                    <PlausibleProvider src="https://plausible.sgf.dev/js/pa-Dvvm40pDUog5XbUjFVk2F.js">
+                        {children}
+                    </PlausibleProvider>
+                </Layout>
+            </body>
+        </html>
+    );
+}

src/pages/404.tsx → app/not-found.tsx

@@ -1,16 +1,6 @@
 import Link from 'next/link';
-import { useEffect } from 'react';
-import { useRouter } from 'next/router';
-
-export default function NotFound(): JSX.Element {
-    const router = useRouter();
-
-    useEffect(() => {
-        setTimeout(() => {
-            router.push('/');
-        }, 3000);
-    });
 
+export default function NotFound() {
     return (
         <div className="not-found">
             <h1>Ooops...</h1>

src/pages/index.tsx → app/page.tsx

@@ -1,32 +1,34 @@
 import { Button } from '@/components/atoms/Button/Button';
 import { Card } from '@/components/Blocks/CardSet/components/Card/Card';
 import { CardSet } from '@/components/Blocks/CardSet/CardSet';
-import Head from 'next/head';
 import Image from 'next/image';
 import { ImageText } from '@/components/Blocks/ImageText/ImageText';
 import { ImageTextLink } from '@/components/Blocks/ImageTextLink/ImageTextLink';
+import type { Metadata } from 'next';
+import { projects } from '@/utils/projectData';
 import { Sponsors } from '@/components/Blocks/Sponsors/Sponsors';
 import { Stats } from '@/components/Blocks/Stats/Stats';
-import { projects } from '@/utils/projectData';
 import styles from '@/styles/pages/Home.module.scss';
 
-export default function Home(): JSX.Element {
-    const heroImage = <Image src={'/images/icons/group-working.svg'} alt="group working " width={360} height={220} />;
+export const metadata: Metadata = {
+    title: 'Open SGF | Home',
+    keywords: 'Open SGF',
+};
+
+export default function Home() {
+    const heroImage = <Image src="/images/icons/group-working.svg" alt="group working" width={360} height={220} />;
 
     const heroText = (
         <div className={styles.heroText}>
             <h1>Open SGF</h1>
             <p className={styles.groupDescription}>
-                We are a volunteer group of designers and developers
-                out of Springfield, Missouri. We provide a forum for
-                mobile, web, and application designers and developers
-                to tackle technical problems for our community.
+                We are a volunteer group of designers and developers out of Springfield, Missouri. We provide a forum
+                for mobile, web, and application designers and developers to tackle technical problems for our
+                community.
             </p>
             <p className={styles.groupDescription}>
-                Many organizations lack the necessary funding to
-                produce quality technical solutions for their problems.
-                This group aims to close that gap by bringing people
-                together to work on these projects weekly 
+                Many organizations lack the necessary funding to produce quality technical solutions for their problems.
+                This group aims to close that gap by bringing people together to work on these projects weekly
             </p>
         </div>
     );
@@ -65,28 +67,22 @@ export default function Home(): JSX.Element {
     );
 
     return (
-        <>
-            <Head>
-                <title>Open SGF | Home</title>
-                <meta name="keywords" content="Open SGF" />
-            </Head>
-            <div className={styles.pageWrapper}>
-                <ImageText
-                    image={heroImage}
-                    text={heroText}
-                    dotsUrl="/images/icons/dots-one.png"
-                    imageTextSizeRatio={0.35}
-                />
-                <Stats />
-                <Sponsors />
-                <ImageTextLink
-                    image={projectTeaserImage}
-                    text={projectTeaserText}
-                    textRight={true}
-                    link={{ text: 'View All Projects', url: '/projects' }}
-                />
-                <CardSet volunteerCard={volunteerCard} partnerCard={partnerCard} />
-            </div>
-        </>
+        <div className={styles.pageWrapper}>
+            <ImageText
+                image={heroImage}
+                text={heroText}
+                dotsUrl="/images/icons/dots-one.png"
+                imageTextSizeRatio={0.35}
+            />
+            <Stats />
+            <Sponsors />
+            <ImageTextLink
+                image={projectTeaserImage}
+                text={projectTeaserText}
+                textRight={true}
+                link={{ text: 'View All Projects', url: '/projects' }}
+            />
+            <CardSet volunteerCard={volunteerCard} partnerCard={partnerCard} />
+        </div>
     );
 }

src/pages/partner.tsx → app/partner/page.tsx

@@ -1,9 +1,13 @@
 import { ContactForm } from '@/components/Blocks/ContactForm/ContactForm';
-import React from 'react';
+import type { Metadata } from 'next';
 import { Sponsors } from '@/components/Blocks/Sponsors/Sponsors';
 import styles from '@/styles/pages/Partner.module.scss';
 
-export default function partner(): JSX.Element {
+export const metadata: Metadata = {
+    title: 'Partner | Open SGF',
+};
+
+export default function Partner() {
     return (
         <div className={styles.pageWrapper}>
             <div>