feat: #17 - Adopt next.js app route

andriyfm · Mar 10, 2024 · 3ce9e43 · 3ce9e43
1 parent d4f900b
commit 3ce9e43
Show file tree

Hide file tree

Showing 22 changed files with 2,617 additions and 1,841 deletions.
diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "autoprefixer": "^10.4.11",
-    "next": "^12.3.0",
+    "next": "^14.1.3",
     "next-pwa": "^5.6.0",
     "postcss": "^8.4.16",
     "react": "^18.2.0",
@@ -47,25 +47,25 @@
     "@types/react": "^18.0.20",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@types/testing-library__react": "^10.2.0",
-    "@typescript-eslint/eslint-plugin": "^5.37.0",
-    "@typescript-eslint/parser": "^5.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
     "commitizen": "^4.2.5",
     "cypress": "^10.8.0",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "<8.0.0",
+    "eslint": "^8.57.0",
     "eslint-config-google": "^0.14.0",
-    "eslint-config-next": "12.0.3",
+    "eslint-config-next": "^14.1.3",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-jest-dom": "^4.0.2",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.1",
     "jest": "^29.0.3",
     "jest-environment-jsdom": "^29.0.3",
     "lint-staged": "^13.0.3",
     "msw": "^0.47.3",
-    "next-router-mock": "^0.7.4",
+    "next-router-mock": "^0.9.12",
     "prettier": "^2.7.1",
     "start-server-and-test": "^1.14.0",
     "ts-node": "^10.9.1",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -0,0 +1,35 @@
+/* eslint-disable new-cap */
+import { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "../styles/globals.css";
+
+// If loading a variable font, you don't need to specify the font weight
+const inter = Inter({
+  subsets: ["latin"],
+  display: "swap",
+});
+
+if (process.env.NEXT_PUBLIC_API_MOCKING === "enabled") {
+  import("../mocks").then(({ setupMocks }) => {
+    setupMocks();
+  });
+}
+
+export const metadata: Metadata = {
+  title: "Home",
+  description: "Welcome to Next.js",
+};
+
+export default function RootLayout({
+  // Layouts must accept a children prop.
+  // This will be populated with nested layouts or pages
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" className={inter.className}>
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/src/styles/Home.module.css → src/app/page.module.css b/src/styles/Home.module.css → src/app/page.module.css
diff --git a/src/pages/index.tsx → src/app/page.tsx b/src/pages/index.tsx → src/app/page.tsx
@@ -1,39 +1,29 @@
-import type { NextPage } from "next";
-import Head from "next/head";
+import { Metadata } from "next";
 import Image from "next/image";
-import * as React from "react";
-import styles from "styles/Home.module.css";
+import styles from "./page.module.css";
 
-const Home: NextPage = () => {
-  React.useEffect(() => {
-    fetch("/api/hello")
-      .then((res) => res.json())
-      .then((res) => console.log(res))
-      .catch((err) => console.log(err));
-  }, []);
+export const metadata: Metadata = {
+  title: "My Page Title",
+  description: "My Page Description",
+};
 
+export default function HomePage() {
   return (
     <div className={styles.container}>
-      <Head>
-        <title>Next Boilerplate</title>
-        <meta name="description" content="Generated by create next app" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
       <main className={styles.main}>
-        <h1 className="font-black text-7xl">
-          Next{" "}
+        <h1 className="tw-font-black tw-text-7xl">
+          Next.js{" "}
           <a
             href="https://github.com/andriyfm/next-boilerplate"
-            className="text-blue-500 transition-colors hover:text-blue-600"
+            className="tw-text-blue-500 tw-transition-colors hover:tw-text-red-500"
           >
             Boilerplate
           </a>
         </h1>
 
         <a
           href="https://github.com/andriyfm"
-          className="text-xs text-center text-gray-400 hover:underline"
+          className="tw-text-xs tw-text-center tw-text-gray-400 hover:tw-underline"
         >
           by andriyfm
         </a>
@@ -88,6 +78,4 @@ const Home: NextPage = () => {
       </footer>
     </div>
   );
-};
-
-export default Home;
+}
diff --git a/src/components/atoms/Button/index.test.tsx → src/components/atoms/Button/Button.test.tsx b/src/components/atoms/Button/index.test.tsx → src/components/atoms/Button/Button.test.tsx
@@ -1,4 +1,4 @@
-import Button from ".";
+import Button from "./Button";
 import { fireEvent, render, screen } from "@testing-library/react";
 
 describe("Button", () => {

diff --git a/src/components/atoms/Button/index.tsx → src/components/atoms/Button/Button.tsx b/src/components/atoms/Button/index.tsx → src/components/atoms/Button/Button.tsx
diff --git a/src/components/atoms/index.tsx b/src/components/atoms/index.tsx
@@ -1,2 +1 @@
-// Place all atom components in this folder and import it here.
-export {};
+export { Button } from "./Button/Button";
diff --git a/src/configs/index.tsx b/src/configs/index.tsx
diff --git a/src/contexts/index.tsx b/src/contexts/index.tsx
diff --git a/src/data/index.tsx b/src/data/index.tsx
diff --git a/src/hooks/index.tsx b/src/hooks/index.tsx
diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
diff --git a/src/pages/_offline.tsx b/src/pages/_offline.tsx
diff --git a/src/pages/api/hello.ts b/src/pages/api/hello.ts
diff --git a/src/pages/api/user.ts b/src/pages/api/user.ts
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -1,5 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@import "typography.css";
diff --git a/src/styles/typography.css b/src/styles/typography.css
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -5,6 +5,7 @@ const colors = require("tailwindcss/colors");
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  prefix: "tw-",
   content: ["./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {

diff --git a/tsconfig.json b/tsconfig.json
@@ -19,9 +19,8 @@
     "noImplicitReturns": true,
     "pretty": true,
     "sourceMap": true,
-    "baseUrl": "./src",
+    "baseUrl": ".",
     "paths": {
-      "*": ["src/*"],
       "@/contexts/*": ["contexts/*"],
       "@/pages/*": ["pages/*"],
       "@/data/*": ["data/*"],
@@ -44,8 +43,13 @@
       "node",
       "@types/testing-library__jest-dom",
       "@testing-library/jest-dom"
+    ],
+    "plugins": [
+      {
+        "name": "next"
+      }
     ]
   },
-  "include": ["next-env.d.ts", "src/**/*"],
+  "include": ["next-env.d.ts", "src/**/*", ".next/types/**/*.ts"],
   "exclude": ["node_modules", "cypress"]
 }