feat: upgrade nextjs & tailwindcss

Author: Mathis Barré

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -23,12 +23,13 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
 
 # local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env*.local
 
 # vercel
 .vercel
+
+# typescript
+*.tsbuildinfo

.vscode/settings.json

@@ -12,7 +12,11 @@ yarn dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
 
 ## Learn More
 
@@ -25,6 +29,6 @@ You can check out [the Next.js GitHub repository](https://github.com/vercel/next
 
 ## Deploy on Vercel
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
 Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

README.md

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

next-env.d.ts

@@ -1,10 +1,7 @@
-const withPWA = require("next-pwa");
+/** @type {import('next').NextConfig} */
 
-module.exports = withPWA({
-  pwa: {
-    dest: "public",
-    disable: process.env.NODE_ENV === "development",
-  },
+const nextConfig = {
+  reactStrictMode: true,
   async rewrites() {
     return [
       {
@@ -17,4 +14,6 @@ module.exports = withPWA({
       },
     ];
   },
-});
+}
+
+module.exports = nextConfig

next.config.js

@@ -5,23 +5,24 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "lint": "next lint"
   },
   "dependencies": {
     "@splitbee/web": "^0.2.4",
-    "@tailwindcss/aspect-ratio": "^0.2.0",
-    "autoprefixer": "^10.2.5",
-    "next": "^11.1.0",
-    "next-pwa": "^5.2.24",
-    "postcss": "^8.2.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "tailwindcss": "^2.0.2"
+    "next": "12.1.4",
+    "react": "18.0.0",
+    "react-dom": "18.0.0"
   },
   "devDependencies": {
-    "@tailwindcss/jit": "^0.1.18",
-    "@types/node": "^14.14.20",
-    "@types/react": "^17.0.0",
-    "typescript": "^4.1.3"
+    "@types/node": "17.0.23",
+    "@types/react": "18.0.1",
+    "@types/react-dom": "18.0.0",
+    "autoprefixer": "^10.4.4",
+    "eslint": "8.13.0",
+    "eslint-config-next": "12.1.4",
+    "postcss": "^8.4.12",
+    "tailwindcss": "^3.0.23",
+    "typescript": "4.6.3"
   }
 }

package.json

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
-    "@tailwindcss/jit": {},
+    tailwindcss: {},
     autoprefixer: {},
   },
-};
+}

postcss.config.js

@@ -14,7 +14,7 @@ export default function Intro() {
 
       <h2 className="title-section">Qui suis-je ?</h2>
       <p className="text-gray-200 ">
-        Je suis un jeune développeur web et mobile français qui passe du temps à faire <a className="link" href="https://www.youtube.com/channel/UCl3-1zqMl6YkRx0OQ3KwC_g">du contenu</a> et <a className="link" href="https://devs.coffee">des projets</a> sur mon temps libre ! J'ai récemment appris le développement mobile, et je me spécialise dans le développement front-end en explorant les tests, l'architecture et autre. Mon prochain objectif est de devenir plus polyvalent en maitrisant aussi le développement back-end.
+        Je suis un jeune développeur web et mobile français qui passe du temps à faire <a className="link" href="https://www.youtube.com/channel/UCl3-1zqMl6YkRx0OQ3KwC_g">du contenu</a> et <a className="link" href="https://devs.coffee">des projets</a> sur mon temps libre ! J&apos;ai récemment appris le développement mobile, et je me spécialise dans le développement front-end en explorant les tests, l&apos;architecture et autre. Mon prochain objectif est de devenir plus polyvalent en maitrisant aussi le développement back-end.
       </p>
     </section>
   )

public/android-chrome-192x192.png

@@ -2,9 +2,9 @@ export default function Technologies() {
   return (
     <section>
       <h2 className="title-section">Quels sont les technologies que je maitrise ?</h2>
-      <p className="mb-2 text-gray-200 ">J'adore travailler avec <span className="bold">tailwindcss</span>, <span className="bold">React</span> et <span className="bold">Next.js</span> avec <span className="bold">TypeScript</span> quand je fais du développement front-end. Mais j'ai aussi appris <span className="bold">Vue.js</span> durant mon alternance chez Lion Coach. J'apprends le développement mobile en <span className=" bold">React Native</span> grâce à Beapp, c'est actuellement ce que je fais au quotidien.</p>
+      <p className="mb-2 text-gray-200 ">J&apos;adore travailler avec <span className="bold">tailwindcss</span>, <span className="bold">React</span> et <span className="bold">Next.js</span> avec <span className="bold">TypeScript</span> quand je fais du développement front-end. Mais j&apos;ai aussi appris <span className="bold">Vue.js</span> durant mon alternance chez Lion Coach. J&apos;apprends le développement mobile en <span className=" bold">React Native</span> grâce à Beapp, c&apos;est actuellement ce que je fais au quotidien.</p>
       <p className="mb-2 text-gray-200 ">
-        Durant mon année d'alternance, j'ai appris les rudiments du back-end. Je connais <span className="bold">express.js</span> mais je préfère <span className="bold">fastify</span> avec <span className="bold">Prisma ORM</span>. J'ai pour objectif moyen terme d'approfondir mes connaissances en back-end <span className="bold">Node.js</span> mais aussi en <span className="bold">PHP</span> avec <span className="bold">Symfony</span>.
+        Durant mon année d&apos;alternance, j&apos;ai appris les rudiments du back-end. Je connais <span className="bold">express.js</span> mais je préfère <span className="bold">fastify</span> avec <span className="bold">Prisma ORM</span>. J&apos;ai pour objectif moyen terme d&apos;approfondir mes connaissances en back-end <span className="bold">Node.js</span> mais aussi en <span className="bold">PHP</span> avec <span className="bold">Symfony</span>.
       </p>
     </section >
   )

public/android-chrome-512x512.png

@@ -1,7 +1,8 @@
 module.exports = {
-  purge: ["./src/pages/**/*.tsx", "./src/components/**/*.tsx"],
-  darkMode: false, // or 'media' or 'class'
-  mode: "jit",
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx}",
+    "./src/components/**/*.{js,ts,jsx,tsx}",
+  ],
   theme: {
     extend: {
       spacing: {
@@ -16,8 +17,5 @@ module.exports = {
       },
     },
   },
-  variants: {
-    extend: {},
-  },
-  plugins: [require("@tailwindcss/aspect-ratio")],
-};
+  plugins: [],
+}

public/apple-touch-icon.png

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -17,17 +13,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./*"],
-    }
+    "incremental": true
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
 }