Merge pull request #13 from ixartz/update-may2024

Update dependencies and make the template responsive

.env

@@ -3,6 +3,10 @@
 # For security reason, don't push secret key in your git repo.
 # Append .local to the environement files to prevent your secret key from being commited to Git.
 
+# Hosting
+# Replace by your domain name
+NEXT_PUBLIC_APP_URL=https://example.com
+
 # Database
 # Please use a working DATABASE_URL. Otherwise, Next.js build will timeout and you will get the following error: "because it took more than 60 seconds"
 # DATABASE_URL=libsql://[RANDOM-CHARS]-[DB-NAME]-[ORG-NAME].turso.io

.eslintrc.json

@@ -52,7 +52,6 @@
         "react/destructuring-assignment": "off", // Vscode doesn't support automatically destructuring, it's a pain to add a new variable
         "react/require-default-props": "off", // Allow non-defined react props as undefined
         "react/jsx-props-no-spreading": "off", // _app.tsx uses spread operator and also, react-hook-form
-        "jsx-a11y/aria-role": "off", // Remove false positive errors with role attribute in Clerk components
         "react/no-unstable-nested-components": "off", // Needed by i18n library
         "@typescript-eslint/comma-dangle": "off", // Avoid conflict rule between Eslint and Prettier
         "@typescript-eslint/consistent-type-imports": "error", // Ensure `import type` is used when it's necessary

.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 }}

.gitignore

@@ -23,11 +23,6 @@ storybook-static
 /.next
 /out
 
-# next-sitemap
-public/robots.txt
-public/sitemap.xml
-public/sitemap-*.xml
-
 # cache
 .swc/
 

.vscode/i18n-ally-custom-framework.yml

@@ -0,0 +1,12 @@
+languageIds:
+  - javascript
+  - typescript
+  - javascriptreact
+  - typescriptreact
+
+usageMatchRegex:
+  - "[^\\w\\d]t\\(['\"`]({key})['\"`]"
+
+scopeRangeRegex: "(?:useTranslations\\(|getTranslations\\(|namespace:)\\s*['\"`](.*?)['\"`]"
+
+monopoly: true

.vscode/settings.json

@@ -20,12 +20,11 @@
     "lucide-react"
   ],
   "typescript.preferences.preferTypeOnlyAutoImports": true, // Prefer type-only imports
-  "jest.autoRun": {
-    "watch": false // Start the jest with the watch flag
-    // "onStartup": ["all-tests"] // Run all tests upon project launch
-  },
-  "jest.showCoverageOnLoad": true, // Show code coverage when the project is launched
-  "jest.autoRevealOutput": "on-exec-error", // Don't automatically open test explorer terminal on launch
+  "jest.runMode": {
+    "type": "on-save",
+    "testFileOnly": true,
+    "coverage": true
+  }, // Configure Jest extension
   // Multiple language settings for json and jsonc files
   "[json][jsonc][yaml]": {
     "editor.formatOnSave": true,

README.md

@@ -4,7 +4,7 @@
   <a href="https://creativedesignsguru.com/demo/Nextjs-Boilerplate/"><img height="300" src="public/assets/images/nextjs-starter-banner.png?raw=true" alt="Next js starter banner"></a>
 </p>
 
-🚀 Boilerplate and Starter for Next.js with App Router support, Tailwind CSS and TypeScript ⚡️ Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Jest, Testing Library, Commitlint, VSCode, PostCSS, Tailwind CSS, Authentication with [Clerk](https://go.clerk.com/zGlzydF), Database with DrizzleORM (SQLite, PostgreSQL, and MySQL) and [Turso](https://turso.tech/?utm_source=nextjsstarterbp), Error Monitoring with [Sentry](https://sentry.io/for/nextjs/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo), Logging with Pino.js and Log Management with [Better Stack](https://betterstack.com/?utm_source=github&utm_medium=sponsorship&utm_campaign=next-js-boilerplate), Monitoring as Code with [Checkly](https://www.checklyhq.com/?utm_source=github&utm_medium=sponsorship&utm_campaign=next-js-boilerplate), Storybook, Multi-language (i18n), and more.
+🚀 Boilerplate and Starter for Next.js with App Router support, Tailwind CSS and TypeScript ⚡️ Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Jest, Testing Library, Commitlint, VSCode, PostCSS, Tailwind CSS, Authentication with [Clerk](https://go.clerk.com/zGlzydF), Database with DrizzleORM (SQLite, PostgreSQL, and MySQL) and [Turso](https://turso.tech/?utm_source=nextjsstarterbp), Error Monitoring with [Sentry](https://sentry.io/for/nextjs/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo), Logging with Pino.js and Log Management, Monitoring as Code, Storybook, Multi-language (i18n), and more.
 
 Clone this project and use it to create your own SaaS. You can check the live demo at [SaaS Boilerplate](https://react-saas.com).
 
@@ -21,6 +21,42 @@ Clone this project and use it to create your own SaaS. You can check the live de
         </picture>
       </a>
     </td>
+    <td align="center" width="33%">
+      <a href="https://turso.tech/?utm_source=nextjsstarterbp">
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="public/assets/images/turso-light.png?raw=true">
+          <source media="(prefers-color-scheme: light)" srcset="public/assets/images/turso-dark.png?raw=true">
+          <img alt="Turso - SQLite for Production" src="public/assets/images/turso-dark.png?raw=true">
+        </picture>
+      </a>
+    </td>
+    <td align="center" width="33%">
+      <a href="https://l.crowdin.com/next-js">
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="public/assets/images/crowdin-white.png?raw=true">
+          <source media="(prefers-color-scheme: light)" srcset="public/assets/images/crowdin-dark.png?raw=true">
+          <img alt="Crowdin" src="public/assets/images/crowdin-dark.png?raw=true">
+        </picture>
+      </a>
+    </td>
+  </tr>
+  <tr height="187px">
+    <td align="center" width="33%">
+      <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">
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="public/assets/images/sentry-white.png?raw=true">
+          <source media="(prefers-color-scheme: light)" srcset="public/assets/images/sentry-dark.png?raw=true">
+          <img alt="Sentry" src="public/assets/images/sentry-dark.png?raw=true">
+        </picture>
+      </a>
+      <a 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">
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="public/assets/images/codecov-white.svg?raw=true">
+          <source media="(prefers-color-scheme: light)" srcset="public/assets/images/codecov-dark.svg?raw=true">
+          <img alt="Codecov" src="public/assets/images/codecov-dark.svg?raw=true">
+        </picture>
+      </a>
+    </td>
     <td align="center" width="33%">
       <a href="mailto:[email protected]">
         Add your logo here
@@ -66,7 +102,7 @@ Developer experience first, extremely flexible code structure and only keep what
 - 💡 Absolute Imports using `@` prefix
 - 🗂 VSCode configuration: Debug, Settings, Tasks and Extensions
 - 🤖 SEO metadata, JSON-LD and Open Graph tags
-- 🗺️ Sitemap.xml and robots.txt with next-sitemap
+- 🗺️ Sitemap.xml and robots.txt
 - ⌘ Database exploration with Drizzle Studio and CLI migration tool with Drizzle Kit
 - ⚙️ [Bundler Analyzer](https://www.npmjs.com/package/@next/bundle-analyzer)
 - 🌈 Include a FREE minimalist theme
@@ -88,7 +124,7 @@ Built-in feature from Next.js:
 
 ### Requirements
 
-- Node.js 18+ and npm
+- Node.js 20+ and npm
 
 ### Getting started
 
@@ -199,7 +235,6 @@ You can easily configure Next.js SaaS Boilerplate by making a search in the whol
 - `src/utils/AppConfig.ts`: configuration file
 - `src/templates/BaseTemplate.tsx`: default theme
 - `next.config.mjs`: Next.js configuration
-- `next-sitemap.config.js`: sitemap configuration
 - `.env`: default environment variables
 
 You have access to the whole code source if you need further customization. The provided code is only example for you to start your project. The sky is the limit 🚀.
@@ -242,7 +277,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' });
 }
 ```
@@ -325,14 +360,6 @@ npm run db:studio
 
 Then, you can open https://local.drizzle.studio with your favorite browser to explore your database.
 
-### Known warnings
-
-#### webpack.cache.PackFileCacheStrategy
-
-Warning: webpack.cache.PackFileCacheStrategy Serializing big strings (104kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
-
-This warning is caused by using `Clerk` and `next-intl` middlewares. It only happens when both middlewares are used together.
-
 ### VSCode information (optional)
 
 If you are VSCode users, you can have a better integration with VSCode by installing the suggested extension in `.vscode/extension.json`. The starter code comes up with Settings for a seamless integration with VSCode. The Debug configuration is also provided for frontend and backend debugging experience.
@@ -364,6 +391,42 @@ See [LICENSE](LICENSE) for more information.
         </picture>
       </a>
     </td>
+    <td align="center" width="33%">
+      <a href="https://turso.tech/?utm_source=nextjsstarterbp">
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="public/assets/images/turso-light.png?raw=true">
+          <source media="(prefers-color-scheme: light)" srcset="public/assets/images/turso-dark.png?raw=true">
+          <img alt="Turso - SQLite for Production" src="public/assets/images/turso-dark.png?raw=true">
+        </picture>
+      </a>
+    </td>
+    <td align="center" width="33%">
+      <a href="https://l.crowdin.com/next-js">
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="public/assets/images/crowdin-white.png?raw=true">
+          <source media="(prefers-color-scheme: light)" srcset="public/assets/images/crowdin-dark.png?raw=true">
+          <img alt="Crowdin" src="public/assets/images/crowdin-dark.png?raw=true">
+        </picture>
+      </a>
+    </td>
+  </tr>
+  <tr height="187px">
+    <td align="center" width="33%">
+      <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">
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="public/assets/images/sentry-white.png?raw=true">
+          <source media="(prefers-color-scheme: light)" srcset="public/assets/images/sentry-dark.png?raw=true">
+          <img alt="Sentry" src="public/assets/images/sentry-dark.png?raw=true">
+        </picture>
+      </a>
+      <a 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">
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="public/assets/images/codecov-white.svg?raw=true">
+          <source media="(prefers-color-scheme: light)" srcset="public/assets/images/codecov-dark.svg?raw=true">
+          <img alt="Codecov" src="public/assets/images/codecov-dark.svg?raw=true">
+        </picture>
+      </a>
+    </td>
     <td align="center" width="33%">
       <a href="mailto:[email protected]">
         Add your logo here

jest.config.ts

@@ -32,6 +32,7 @@ const config: Config = {
       statements: 0,
     },
   },
+  testEnvironment: 'jest-environment-jsdom',
   testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/tests/'],
 };
 

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({