Merge pull request ixartz#12 from ixartz/update-boilerplate

Apply change from Next.js Boilerplate

.eslintrc

@@ -2,23 +2,30 @@
   // Configuration for JavaScript files
   "extends": [
     "airbnb-base",
-    "next/core-web-vitals",
+    "next/core-web-vitals", // Needed to avoid warning in next.js build: 'The Next.js plugin was not detected in your ESLint configuration'
     "plugin:prettier/recommended"
   ],
   "rules": {
     "prettier/prettier": [
       "error",
       {
-        "singleQuote": true
+        "singleQuote": true,
+        "endOfLine": "auto"
       }
     ]
   },
   "overrides": [
     // Configuration for TypeScript files
     {
       "files": ["**/*.ts", "**/*.tsx"],
-      "plugins": ["@typescript-eslint", "unused-imports"],
+      "plugins": [
+        "@typescript-eslint",
+        "unused-imports",
+        "tailwindcss",
+        "simple-import-sort"
+      ],
       "extends": [
+        "plugin:tailwindcss/recommended",
         "airbnb-typescript",
         "next/core-web-vitals",
         "plugin:prettier/recommended"
@@ -30,36 +37,28 @@
         "prettier/prettier": [
           "error",
           {
-            "singleQuote": true
+            "singleQuote": true,
+            "endOfLine": "auto"
           }
         ],
         "react/destructuring-assignment": "off", // Vscode doesn't support automatically destructuring, it's a pain to add a new variable
-        "jsx-a11y/anchor-is-valid": "off", // Next.js use his own internal link system
         "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
+        "react-hooks/exhaustive-deps": "off", // Incorrectly report needed dependency with Next.js router
         "@next/next/no-img-element": "off", // We currently not using next/image because it isn't supported with SSG mode
-        "import/order": [
-          "error",
-          {
-            "groups": ["builtin", "external", "internal"],
-            "pathGroups": [
-              {
-                "pattern": "react",
-                "group": "external",
-                "position": "before"
-              }
-            ],
-            "pathGroupsExcludedImportTypes": ["react"],
-            "newlines-between": "always",
-            "alphabetize": {
-              "order": "asc",
-              "caseInsensitive": true
-            }
-          }
-        ],
+        "@next/next/link-passhref": "off", // Only needed when the child of Link wraps an <a> tag
         "@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
+        "no-restricted-syntax": [
+          "error",
+          "ForInStatement",
+          "LabeledStatement",
+          "WithStatement"
+        ], // Overrides Airbnb configuration and enable no-restricted-syntax
         "import/prefer-default-export": "off", // Named export is easier to refactor automatically
-        "class-methods-use-this": "off", // _document.tsx use render method without `this` keyword
+        "tailwindcss/no-custom-classname": "off", // Disabled otherwise nightmare to allow each custom tailwind classes
+        "simple-import-sort/imports": "error", // Import configuration for `eslint-plugin-simple-import-sort`
+        "simple-import-sort/exports": "error", // Export configuration for `eslint-plugin-simple-import-sort`
         "@typescript-eslint/no-unused-vars": "off",
         "unused-imports/no-unused-imports": "error",
         "unused-imports/no-unused-vars": [

.github/FUNDING.yml

@@ -1 +1,2 @@
-custom: ['https://creativedesignsguru.com/category/nextjs/', 'https://www.buymeacoffee.com/ixartz']
+custom:
+   ["https://donate.stripe.com/7sI5m5146ehfddm7tj", "https://nextlessjs.com"]

.husky/pre-commit

@@ -1,5 +1,5 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-# Disable concurent to run build-types after ESLint in lint-staged
-npx lint-staged --concurrent false
+# Disable concurent to run `check-types` after ESLint in lint-staged
+cd "$(dirname "$0")/.." && npx lint-staged --concurrent false

.vscode/extensions.json

@@ -6,6 +6,7 @@
     "csstools.postcss",
     "blanu.vscode-styled-jsx",
     "msjsdiag.debugger-for-chrome",
-    "bradlc.vscode-tailwindcss"
+    "bradlc.vscode-tailwindcss",
+    "yoavbls.pretty-ts-errors"
   ]
 }

.vscode/settings.json

@@ -1,10 +1,6 @@
 {
   "editor.tabSize": 2,
   "editor.detectIndentation": false,
-  "jest.autoRun": {
-    "watch": false,
-    "onSave": "test-file"
-  },
   "search.exclude": {
     "package-lock.json": true
   },
@@ -14,9 +10,16 @@
     "source.addMissingImports",
     "source.fixAll.eslint"
   ],
+  "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
   // Multiple language settings for json and jsonc files
-  "[json][jsonc]": {
+  "[json][jsonc][yaml]": {
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  },
+  "prettier.ignorePath": ".gitignore" // Don't run prettier for files listed in .gitignore
 }

.vscode/tasks.json

@@ -6,7 +6,7 @@
     {
       "label": "Project wide type checking with TypeScript",
       "type": "npm",
-      "script": "build-types",
+      "script": "check-types",
       "problemMatcher": ["$tsc"],
       "group": {
         "kind": "build",

README.md

@@ -1,4 +1,4 @@
-# Landing Page Template built with Next JS 12+, Tailwind CSS 3 and TypeScript [![Twitter](https://img.shields.io/twitter/url/https/twitter.com/cloudposse.svg?style=social&label=Follow%20%40Ixartz)](https://twitter.com/ixartz)
+# Landing Page Template built with Next JS 13+, Tailwind CSS 3 and TypeScript [![Twitter](https://img.shields.io/twitter/url/https/twitter.com/cloudposse.svg?style=social&label=Follow%20%40Ixartz)](https://twitter.com/ixartz)
 
 <p align="center">
   <a href="https://creativedesignsguru.com/demo/nextjs-landing-page/"><img src="public/assets/images/nextjs-landing-page-banner.png?raw=true" alt="Next js starter banner"></a>
@@ -22,7 +22,7 @@ Developer experience first:
 - 🎨 Integrate with [Tailwind CSS](https://tailwindcss.com)
 - 💅 PostCSS for processing Tailwind CSS and integrated to `styled-jsx`
 - 🎉 Type checking [TypeScript](https://www.typescriptlang.org)
-- ✅ Strict Mode for TypeScript and React 17
+- ✅ Strict Mode for TypeScript and React 18
 - ✏️ Linter with [ESLint](https://eslint.org) (default NextJS, NextJS Core Web Vitals and Airbnb configuration)
 - 🛠 Code Formatter with [Prettier](https://prettier.io)
 - 🦊 Husky for Git Hooks
@@ -178,7 +178,7 @@ Everyone is welcome to contribute to this project. Feel free to open an issue if
 
 ### License
 
-Licensed under the MIT License, Copyright © 2022
+Licensed under the MIT License, Copyright © 2023
 
 See [LICENSE](LICENSE) for more information.
 

lint-staged.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   '*.{js,jsx,ts,tsx}': ['eslint --fix', 'eslint'],
-  '**/*.ts?(x)': () => 'npm run build-types',
+  '**/*.ts?(x)': () => 'npm run check-types',
   '*.json': ['prettier --write'],
 };

next.config.js

@@ -4,6 +4,9 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 });
 
 module.exports = withBundleAnalyzer({
+  eslint: {
+    dirs: ['.'],
+  },
   poweredByHeader: false,
   trailingSlash: true,
   basePath: '',