chore: update dependencies to the latest version

.github/workflows/CI.yml

@@ -10,7 +10,7 @@ jobs:
   build:
     strategy:
       matrix:
-        node-version: [18.x, 20.x]
+        node-version: [20.x, 22.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     name: Build with ${{ matrix.node-version }}

README.md

@@ -162,7 +162,7 @@ Built-in feature from Next.js:
 
 ### Requirements
 
-- Node.js 18+ and npm
+- Node.js 20+ and npm
 
 ### Getting started
 
@@ -316,7 +316,7 @@ The App Router folder is compatible with the Edge runtime. You can enable it by
 For your information, the database migration is not compatible with the Edge runtime. So, you need to disable the automatic migration in `src/libs/DB.ts`:
 
 ```tsx
-if (process.env.NODE_ENV !== 'production') {
+if (process.env.NODE_ENV === 'development') {
   await migrate(db, { migrationsFolder: './migrations' });
 }
 ```

next.config.mjs

@@ -1,9 +1,15 @@
 /* eslint-disable import/no-extraneous-dependencies, import/extensions */
-import { withSentryConfig } from '@sentry/nextjs';
-import './src/libs/Env.mjs';
+import { fileURLToPath } from 'node:url';
+
 import withBundleAnalyzer from '@next/bundle-analyzer';
+import { withSentryConfig } from '@sentry/nextjs';
+import createJiti from 'jiti';
 import withNextIntl from 'next-intl/plugin';
 
+const jiti = createJiti(fileURLToPath(import.meta.url));
+
+jiti('./src/libs/Env');
+
 const withNextIntlConfig = withNextIntl('./src/libs/i18n.ts');
 
 const bundleAnalyzer = withBundleAnalyzer({

package.json

@@ -26,94 +26,95 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@clerk/localizations": "^1.28.1",
-    "@clerk/nextjs": "^4.29.11",
+    "@clerk/localizations": "^1.28.4",
+    "@clerk/nextjs": "^4.30.1",
     "@hookform/resolvers": "^3.3.4",
     "@libsql/client": "^0.6.0",
     "@logtail/pino": "^0.4.21",
-    "@sentry/nextjs": "^7.109.0",
-    "@spotlightjs/spotlight": "^1.2.16",
-    "@t3-oss/env-nextjs": "^0.9.2",
+    "@sentry/nextjs": "^7.113.0",
+    "@spotlightjs/spotlight": "^1.2.17",
+    "@t3-oss/env-nextjs": "^0.10.1",
     "checkly": "^4.6.3",
-    "drizzle-orm": "^0.30.7",
-    "next": "^14.1.4",
-    "next-intl": "^3.11.0",
-    "pino": "^8.19.0",
+    "drizzle-orm": "^0.30.10",
+    "next": "^14.2.3",
+    "next-intl": "^3.12.2",
+    "pino": "^8.21.0",
     "pino-pretty": "^11.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-hook-form": "^7.51.2",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "react-hook-form": "^7.51.4",
     "sharp": "^0.33.3",
-    "zod": "^3.22.4"
+    "zod": "^3.23.6"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.2.1",
-    "@commitlint/config-conventional": "^19.1.0",
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/config-conventional": "^19.2.2",
     "@commitlint/cz-commitlint": "^19.2.0",
     "@faker-js/faker": "^8.4.1",
-    "@next/bundle-analyzer": "^14.1.4",
-    "@percy/cli": "1.28.2",
+    "@next/bundle-analyzer": "^14.2.3",
+    "@percy/cli": "1.28.5",
     "@percy/playwright": "^1.0.5",
-    "@playwright/test": "^1.43.0",
+    "@playwright/test": "^1.43.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/blocks": "^7.6.17",
-    "@storybook/nextjs": "^7.6.17",
-    "@storybook/react": "^7.6.17",
-    "@storybook/test": "^7.6.17",
+    "@storybook/addon-essentials": "^7.6.19",
+    "@storybook/addon-interactions": "^7.6.19",
+    "@storybook/addon-links": "^7.6.19",
+    "@storybook/blocks": "^7.6.19",
+    "@storybook/nextjs": "^7.6.19",
+    "@storybook/react": "^7.6.19",
+    "@storybook/test": "^7.6.19",
     "@storybook/test-runner": "^0.16.0",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.2",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.6",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.12.4",
-    "@types/react": "^18.2.74",
-    "@typescript-eslint/eslint-plugin": "^7.5.0",
-    "@typescript-eslint/parser": "^7.5.0",
+    "@types/node": "^20.12.9",
+    "@types/react": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
     "autoprefixer": "^10.4.19",
     "commitizen": "^4.3.0",
     "cross-env": "^7.0.3",
-    "cssnano": "^6.1.2",
+    "cssnano": "^7.0.1",
     "dotenv-cli": "^7.4.1",
-    "drizzle-kit": "^0.20.14",
+    "drizzle-kit": "^0.20.18",
     "encoding": "^0.1.13",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^18.0.0",
-    "eslint-config-next": "^14.1.4",
+    "eslint-config-next": "^14.2.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^27.9.0",
-    "eslint-plugin-jest-dom": "^5.2.0",
+    "eslint-plugin-jest": "^28.5.0",
+    "eslint-plugin-jest-dom": "^5.4.0",
     "eslint-plugin-jest-formatting": "^3.1.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-playwright": "^1.5.4",
+    "eslint-plugin-playwright": "^1.6.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-simple-import-sort": "^12.0.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-simple-import-sort": "^12.1.0",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-tailwindcss": "^3.15.1",
-    "eslint-plugin-testing-library": "^6.2.0",
-    "eslint-plugin-unused-imports": "^3.1.0",
+    "eslint-plugin-testing-library": "^6.2.2",
+    "eslint-plugin-unused-imports": "^3.2.0",
     "http-server": "^14.1.1",
     "husky": "^9.0.11",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-fail-on-console": "^3.2.0",
+    "jiti": "^1.21.0",
     "lint-staged": "^15.2.2",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "rimraf": "^5.0.5",
-    "semantic-release": "^23.0.7",
+    "semantic-release": "^23.0.8",
     "start-server-and-test": "^2.0.3",
-    "storybook": "^7.6.17",
+    "storybook": "^7.6.19",
     "tailwindcss": "^3.4.3",
-    "tsx": "^4.7.2",
-    "typescript": "^5.4.4"
+    "tsx": "^4.9.3",
+    "typescript": "^5.4.5"
   },
   "config": {
     "commitizen": {

src/app/[locale]/(unauth)/guestbook/page.tsx

@@ -43,7 +43,7 @@ const Guestbook = () => {
       <a href="https://turso.tech/?utm_source=nextjsstarterbp" target="_blank">
         <Image
           className="mx-auto mt-2"
-          src="/assets/images/turso-light.png"
+          src="/assets/images/turso-dark.png"
           alt="SQLite Developer Experience"
           width={130}
           height={112}

src/app/[locale]/(unauth)/page.tsx

@@ -91,15 +91,8 @@ export default function Index() {
         >
           Better Stack
         </a>
-        , Monitoring as Code with{' '}
-        <a
-          className="text-blue-700 hover:border-b-2 hover:border-blue-700"
-          href="https://www.checklyhq.com/?utm_source=github&amp;utm_medium=sponsorship&amp;utm_campaign=next-js-boilerplate"
-          target="_blank"
-        >
-          Checkly
-        </a>
-        , Storybook, Multi-language (i18n), and more.
+        , Monitoring as Code with Checkly, Storybook, Multi-language (i18n), and
+        more.
       </p>
     </>
   );

src/app/[locale]/(unauth)/portfolio/[slug]/page.tsx

@@ -33,32 +33,24 @@ const PortfolioDetail = (props: IPortfolioDetailProps) => {
       <p>{t('content')}</p>
 
       <div className="mt-5 text-center text-sm">
-        {`${t('error_reporting_powered_by')} `}
+        {`${t('log_management_powered_by')} `}
         <a
           className="text-blue-700 hover:border-b-2 hover:border-blue-700"
-          href="https://sentry.io/for/nextjs/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo"
+          href="https://betterstack.com/?utm_source=github&utm_medium=sponsorship&utm_campaign=next-js-boilerplate"
           target="_blank"
         >
-          Sentry
-        </a>{' '}
-        - {`${t('coverage_powered_by')} `}
-        <a
-          className="text-blue-700 hover:border-b-2 hover:border-blue-700"
-          href="https://about.codecov.io/codecov-free-trial/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo"
-          target="_blank"
-        >
-          Codecov
+          Better Stack
         </a>
       </div>
 
       <a
-        href="https://sentry.io/for/nextjs/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo"
+        href="https://betterstack.com/?utm_source=github&utm_medium=sponsorship&utm_campaign=next-js-boilerplate"
         target="_blank"
       >
         <Image
           className="mx-auto mt-2"
-          src="/assets/images/sentry-dark.png"
-          alt="Sentry"
+          src="/assets/images/better-stack-dark.png"
+          alt="Better Stack"
           width={130}
           height={112}
         />

src/app/[locale]/(unauth)/portfolio/page.tsx

@@ -35,24 +35,32 @@ const Portfolio = () => {
       </div>
 
       <div className="mt-5 text-center text-sm">
-        {`${t('log_management_powered_by')} `}
+        {`${t('error_reporting_powered_by')} `}
         <a
           className="text-blue-700 hover:border-b-2 hover:border-blue-700"
-          href="https://betterstack.com/?utm_source=github&utm_medium=sponsorship&utm_campaign=next-js-boilerplate"
+          href="https://sentry.io/for/nextjs/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo"
           target="_blank"
         >
-          Better Stack
+          Sentry
+        </a>{' '}
+        - {`${t('coverage_powered_by')} `}
+        <a
+          className="text-blue-700 hover:border-b-2 hover:border-blue-700"
+          href="https://about.codecov.io/codecov-free-trial/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo"
+          target="_blank"
+        >
+          Codecov
         </a>
       </div>
 
       <a
-        href="https://betterstack.com/?utm_source=github&utm_medium=sponsorship&utm_campaign=next-js-boilerplate"
+        href="https://sentry.io/for/nextjs/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo"
         target="_blank"
       >
         <Image
           className="mx-auto mt-2"
-          src="/assets/images/better-stack-dark.png"
-          alt="Better Stack"
+          src="/assets/images/sentry-dark.png"
+          alt="Sentry"
           width={130}
           height={112}
         />

src/components/Sponsors.tsx

@@ -23,7 +23,7 @@ const Sponsors = () => (
             target="_blank"
           >
             <Image
-              src="/assets/images/turso-light.png"
+              src="/assets/images/turso-dark.png"
               alt="SQLite Developer Experience"
               width={260}
               height={224}

src/libs/DB.ts

@@ -2,7 +2,7 @@ import { createClient } from '@libsql/client';
 import { drizzle } from 'drizzle-orm/libsql';
 import { migrate } from 'drizzle-orm/libsql/migrator';
 
-import { Env } from './Env.mjs';
+import { Env } from './Env';
 
 const client = createClient({
   url: Env.DATABASE_URL,

src/libs/Env.mjs → src/libs/Env.ts

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 import { createEnv } from '@t3-oss/env-nextjs';
 import { z } from 'zod';
 
@@ -11,15 +10,19 @@ export const Env = createEnv({
     LOGTAIL_SOURCE_TOKEN: z.string().optional(),
   },
   client: {
+    NEXT_PUBLIC_APP_URL: z.string().optional(),
     NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().min(1),
+    NEXT_PUBLIC_CLERK_SIGN_IN_URL: z.string().min(1),
   },
   // You need to destructure all the keys manually
   runtimeEnv: {
     CLERK_SECRET_KEY: process.env.CLERK_SECRET_KEY,
     DATABASE_URL: process.env.DATABASE_URL,
     DATABASE_AUTH_TOKEN: process.env.DATABASE_AUTH_TOKEN,
     LOGTAIL_SOURCE_TOKEN: process.env.LOGTAIL_SOURCE_TOKEN,
+    NEXT_PUBLIC_APP_URL: process.env.NEXT_PUBLIC_APP_URL,
     NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY:
       process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
+    NEXT_PUBLIC_CLERK_SIGN_IN_URL: process.env.NEXT_PUBLIC_CLERK_SIGN_IN_URL,
   },
 });

src/libs/Logger.ts

@@ -1,6 +1,6 @@
 import pino from 'pino';
 
-import { Env } from './Env.mjs';
+import { Env } from './Env';
 
 let options = {};
 

src/locales/en.json

@@ -37,15 +37,15 @@
     "meta_description": "Welcome to my portfolio page!",
     "presentation": "Welcome to my portfolio page! Here you will find a carefully curated collection of my work and accomplishments. Through this portfolio, I'm to showcase my expertise, creativity, and the value I can bring to your projects.",
     "portfolio_name": "Portfolio {name}",
-    "log_management_powered_by": "Log management powered by"
+    "error_reporting_powered_by": "Error reporting powered by",
+    "coverage_powered_by": "Code coverage powered by"
   },
   "PortfolioSlug": {
     "meta_title": "Portfolio {slug}",
     "meta_description": "Portfolio {slug} description",
     "header": "Portfolio {slug}",
     "content": "Created a set of promotional materials and branding elements for a corporate event. Crafted a visually unified theme, encompassing a logo, posters, banners, and digital assets. Integrated the client's brand identity while infusing it with a contemporary and innovative approach. Garnered favorable responses from event attendees, resulting in a successful event with heightened participant engagement and increased brand visibility.",
-    "error_reporting_powered_by": "Error reporting powered by",
-    "coverage_powered_by": "Code coverage powered by"
+    "log_management_powered_by": "Log management powered by"
   },
   "SignIn": {
     "meta_title": "Sign in",

src/locales/fr.json

@@ -37,15 +37,15 @@
     "meta_description": "Bienvenue sur la page de mon portfolio !",
     "presentation": "Bienvenue sur ma page portfolio ! Vous trouverez ici une collection soigneusement organisée de mon travail et de mes réalisations. À travers ce portfolio, je mets en valeur mon expertise, ma créativité et la valeur que je peux apporter à vos projets.",
     "portfolio_name": "Portfolio {name}",
-    "log_management_powered_by": "Gestion des logs propulsée par"
+    "error_reporting_powered_by": "Rapport d'erreur propulsé par",
+    "coverage_powered_by": "Couverture de code propulsée par"
   },
   "PortfolioSlug": {
     "meta_title": "Portfolio {slug}",
     "meta_description": "Description du Portfolio {slug}",
     "header": "Portfolio {slug}",
     "content": "Créé un ensemble de matériel promotionnel et d'éléments de marquage pour un événement d'entreprise. Conçu un thème visuellement unifié, englobant un logo, des affiches, des bannières et des actifs numériques. Intégrer l'identité de marque du client tout en l'insufflant à une approche contemporaine et innovante. Des réponses favorables de la part des participants ont été obtenues, ce qui a donné lieu à un événement réussi avec un engagement accru des participants et une meilleure visibilité de la marque.",
-    "error_reporting_powered_by": "Rapport d'erreur propulsé par",
-    "coverage_powered_by": "Couverture de code propulsée par"
+    "log_management_powered_by": "Gestion des logs propulsée par"
   },
   "SignIn": {
     "meta_title": "Se connecter",

tsconfig.json

@@ -56,6 +56,6 @@
     "**/*.tsx",
     ".storybook/*.ts",
     ".next/types/**/*.ts",
-    "src/libs/Env.mjs"
+    "src/libs/Env.ts"
   ]
 }