upgrade to Next.js 15 (#635)

* upgrade to Next.js 15

* added vercel analytics

Author: jeromehardaway

.eslintrc.json

@@ -1,35 +1,33 @@
 {
-    "extends": [
-        "next/core-web-vitals", 
-        "airbnb", 
-        "airbnb-typescript", 
-        "airbnb/hooks", 
-        "prettier",
-        "plugin:@typescript-eslint/recommended",
-        "plugin:@typescript-eslint/recommended-requiring-type-checking"
-    ],
-    "plugins": ["react", "@typescript-eslint", "prettier"],
-    "env": {
+  "extends": [
+      "next/core-web-vitals",
+      "airbnb",
+      "airbnb-typescript",
+      "prettier",
+      "plugin:@typescript-eslint/recommended"
+  ],
+  "plugins": ["react", "@typescript-eslint", "prettier"],
+  "env": {
       "browser": true,
-      "es2021": true,
+      "es2023": true,
       "node": true
-    },
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-        "project": "./tsconfig.json",
-        "ecmaFeatures": {
-            "jsx": true
-        },
-      "ecmaVersion": 13,
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+      "project": "./tsconfig.json",
+      "ecmaFeatures": {
+          "jsx": true
+      },
+      "ecmaVersion": "latest",
       "sourceType": "module"
-    },
-    "rules": {
+  },
+  "rules": {
       "@typescript-eslint/no-misused-promises": [
-        "error",
-        {
-          "checksConditionals": false,
-          "checksVoidReturn": false
-        }
+          "error",
+          {
+              "checksConditionals": false,
+              "checksVoidReturn": false
+          }
       ],
       "no-underscore-dangle": "off",
       "react/react-in-jsx-scope": "off",
@@ -40,61 +38,68 @@
       "import/prefer-default-export": "off",
       "no-param-reassign": "off",
       "import/extensions": [
-        "error",
-        "ignorePackages",
-        {
-          "ts": "never",
-          "tsx": "never"
-        }
+          "error",
+          "ignorePackages",
+          {
+              "ts": "never",
+              "tsx": "never"
+          }
       ],
       "import/no-unresolved": "error",
       "consistent-return": "off",
       "arrow-body-style": "off",
       "prefer-arrow-callback": "off",
-      "react/jsx-filename-extension": "off",
+      "react/jsx-filename-extension": ["error", { "extensions": [".tsx", ".jsx"] }],
       "react/function-component-definition": [
-        "error",
-        {
-          "namedComponents": "arrow-function",
-          "unnamedComponents": "arrow-function"
-        }
+          "error",
+          {
+              "namedComponents": "arrow-function",
+              "unnamedComponents": "arrow-function"
+          }
       ],
       "prettier/prettier": "warn",
-      "jsx-a11y/anchor-is-valid": [ "error", {
-        "components": [ "Link" ],
-        "specialLink": [ "hrefLeft", "hrefRight" ],
-        "aspects": [ "invalidHref", "preferButton" ]
-      }],
+      "jsx-a11y/anchor-is-valid": [
+          "error",
+          {
+              "components": ["Link"],
+              "specialLink": ["hrefLeft", "hrefRight"],
+              "aspects": ["invalidHref", "preferButton"]
+          }
+      ],
       "jsx-a11y/label-has-associated-control": [
-        "error",
-        {
-            "required": {
-                "some": ["nesting", "id"]
-            }
-        }
-    ],
-    "jsx-a11y/label-has-for": [
-        "error",
-        {
-            "required": {
-                "some": ["nesting", "id"]
-            }
-        }
-    ],
+          "error",
+          {
+              "required": {
+                  "some": ["nesting", "id"]
+              }
+          }
+      ],
+      "jsx-a11y/control-has-associated-label": "off",  // Added this line
       "@next/next/no-img-element": "off",
       "react/no-danger": "off",
       "no-void": ["error", { "allowAsStatement": true }]
-    },
-    "overrides": [
+  },
+  "settings": {
+      "react": {
+          "version": "detect"
+      },
+      "import/resolver": {
+          "typescript": {},
+          "node": {
+              "extensions": [".js", ".jsx", ".ts", ".tsx"]
+          }
+      }
+  },
+  "overrides": [
       {
-        "files": ["*.js"],
-        "rules": {
-          "@typescript-eslint/no-unsafe-assignment": "off",
-          "@typescript-eslint/no-var-requires": "off",
-          "@typescript-eslint/no-unsafe-call": "off",
-          "@typescript-eslint/no-unsafe-member-access": "off",
-          "@typescript-eslint/no-unsafe-return": "off"
-        }
+          "files": ["*.js"],
+          "rules": {
+              "@typescript-eslint/no-unsafe-assignment": "off",
+              "@typescript-eslint/no-var-requires": "off",
+              "@typescript-eslint/no-unsafe-call": "off",
+              "@typescript-eslint/no-unsafe-member-access": "off",
+              "@typescript-eslint/no-unsafe-return": "off"
+          }
       }
-    ]
-}
+  ]
+}

README.md

@@ -1,6 +1,6 @@
 <p align="center">
-  <img src="https://img.shields.io/badge/node-v10.16.0-brightgreen.svg?style=flat-square" alt="node" />
-  <img src="https://img.shields.io/badge/npm-v5.6.0-blue.svg?style=flat-square" alt="npm" />
+  <img src="https://img.shields.io/badge/node-v18.18.0-brightgreen.svg?style=flat-square" alt="node" />
+  <img src="https://img.shields.io/badge/npm-v9.0.0-blue.svg?style=flat-square" alt="npm" />
   <a href="https://github.com/Vets-Who-Code/vwc-site/blob/master/LICENSE">
     <img src="https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square" alt="License: MIT" />
   </a>
@@ -22,14 +22,16 @@ Hey there, Soldier! Welcome to the **Vets Who Code Web App**. This project serve
 
 ## What's Under The Hood 🧰
 
-This app is built using a jam-packed tech stack including:
+This app is built using a modern tech stack including:
 
--   Tailwind
--   Next.js
--   Playwright
--   Typescript
--   MDX
--   Lerna architecture
+-   Next.js 15
+-   TypeScript
+-   Tailwind CSS
+-   Playwright for testing
+-   MDX for content
+-   shadcn/ui components
+-   Server Actions
+-   Server Components
 
 ### Our Mission :dart:
 
@@ -46,10 +48,9 @@ To get a local copy up and running, you'll need a few things installed on your m
 ### Prerequisites 🛠️
 
 -   [Git](http://git-scm.com/)
--   [Node](http://nodejs.org/)
+-   [Node.js](http://nodejs.org/) (v18.18.0 or higher)
 -   [NVM](https://github.com/creationix/nvm)
--   [Yarn](https://yarnpkg.com/)
--   [NextJS](https://nextjs.org/)
+-   [pnpm](https://pnpm.io/) (recommended) or npm
 
 ### Installation Steps :wrench:
 
@@ -58,16 +59,16 @@ Fire up your terminal and run:
 ```sh
 $ git clone https://github.com/Vets-Who-Code/vets-who-code-app.git
 $ cd vets-who-code-app
-$ nvm install
-$ yarn add
+$ nvm use
+$ npm install
 $ npm run dev
 ```
 
-And boom! Navigate to `http://localhost:3000/` to see the app.
+Navigate to `http://localhost:3000/` to see the app in action.
 
 ## Development using Dev Container (Optional) 🐳
 
-We have a development container to help you quickly set up your dev environment. This is completely optional but can make getting started easier.
+We support development containers for an easier setup experience.
 
 ### Requirements
 
@@ -87,15 +88,11 @@ We have a development container to help you quickly set up your dev environment.
 2. **Open in VS Code**
 
     - Open the root directory in VS Code.
-    - A notification will appear asking if you would like to reopen the project in a dev container. Choose "Reopen in Container".
-    - If you don't see the notification, open the Command Palette (`F1`) and run `Remote-Containers: Reopen in Container`.
+    - When prompted, choose "Reopen in Container"
+    - Or use Command Palette (`F1`) and run `Remote-Containers: Reopen in Container`.
 
-3. **Wait for the Build**
-
-    - The dev container will build based on the `Dockerfile` and `devcontainer.json` configuration. This may take a few minutes the first time.
-
-4. **Start Developing**
-    - After the container is built, VS Code will attach to it. You're now developing inside the container!
+3. **Start Developing**
+    - Once the container is built and running, you're ready to code!
 
 Remember, this is optional. If you prefer to set up your development environment manually, you can continue to do so.
 
@@ -109,4 +106,4 @@ Curious about upcoming features? Check our [Roadmap](https://github.com/orgs/Vet
 
 ## License :scroll:
 
-This project is under the MIT License - see the [License](https://github.com/Vets-Who-Code/vwc-site/blob/master/LICENSE) for more details.
+This project is under the MIT License - see the [License](https://github.com/Vets-Who-Code/vwc-site/blob/master/LICENSE) for more details.

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

next.config.js

@@ -1,33 +1,47 @@
 /** @type {import('next').NextConfig} */
+const withPWA = require("next-pwa")({
+    dest: "public",
+    disable: process.env.NODE_ENV === "development",
+    register: true,
+    runtimeCaching: require("next-pwa/cache"),
+    buildExcludes: [
+        /middleware-manifest\.json$/,
+        /middleware-runtime\.js$/,
+        /_middleware\.js$/,
+        /^.+\\_middleware\.js$/,
+    ],
+    publicExcludes: ["!robots.txt"],
+});
+
 const nextConfig = {
-    reactStrictMode: false,
+    reactStrictMode: true,
+
+    webpack(config, { isServer }) {
+        // Handle SVG files
+        config.module.rules.push({
+            test: /\.svg$/,
+            use: ["@svgr/webpack"],
+        });
+
+        // Handle fs fallback for client-side
+        if (!isServer) {
+            config.resolve.fallback = {
+                fs: false,
+            };
+        }
+
+        return config;
+    },
+
+    images: {
+        domains: [],
+        remotePatterns: [],
+    },
+
+    experimental: {},
 };
-const withPWA = require("next-pwa");
-const runtimeCaching = require("next-pwa/cache");
-const withReactSvg = require("next-react-svg");
-const path = require("path");
+
+// Load environment variables
 require("dotenv").config();
 
-module.exports = withPWA(
-    withReactSvg({
-        pwa: {
-            disable: process.env.NODE_ENV === "development",
-            dest: "public",
-            register: true,
-            runtimeCaching,
-            buildExcludes: [
-                /\/*server\/middleware-chunks\/[0-9]*[a-z]*[A-Z]*\.js$/,
-                /middleware-manifest\.json$/,
-                /middleware-runtime\.js$/,
-                /_middleware\.js$/,
-                /^.+\\_middleware\.js$/,
-            ],
-            publicExcludes: ["!robots.txt"],
-        },
-        nextConfig,
-        include: path.resolve(__dirname, "src/assets/svgs"),
-        webpack(config) {
-            return config;
-        },
-    })
-);
+module.exports = withPWA(nextConfig);