Merge pull request #112 from htbkoo/migrate-to-next-js

Migrate to `next.js`

.env.example

@@ -1,3 +1,3 @@
-REACT_APP_GOOGLE_ANALYTICS_TRACKING_ENABLED=false
-REACT_APP_GOOGLE_ANALYTICS_TRACKING_ID=UA-000000-01
-REACT_APP_REACT_GA_TEST_MODE=false
+NEXT_PUBLIC_GOOGLE_ANALYTICS_TRACKING_ENABLED=false
+NEXT_PUBLIC_GOOGLE_ANALYTICS_TRACKING_ID=UA-000000-01
+NEXT_PUBLIC_REACT_GA_TEST_MODE=false

.eslintrc.json

@@ -0,0 +1,22 @@
+{
+  "root": true,
+  "extends": [
+    "next/core-web-vitals"
+  ],
+  "plugins": [
+    "only-warn",
+    "testing-library"
+  ],
+  "overrides": [
+    // Only uses Testing Library lint rules in test files
+    {
+      "files": [
+        "**/__tests__/**/*.[jt]s?(x)",
+        "**/?(*.)+(spec|test).[jt]s?(x)"
+      ],
+      "extends": [
+        "plugin:testing-library/react"
+      ]
+    }
+  ]
+}

.github/workflows/node.js.yml

@@ -21,7 +21,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x, 14.x, 16.x]
+        node-version: [16.x, 14.x, 12.x]
         # node-version: [10.x, 12.x, 14.x, 15.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
@@ -38,21 +38,30 @@ jobs:
       id: yarn-cache
       run: echo "::set-output name=dir::$(yarn cache dir)"
 
+    # reference: https://nextjs.org/docs/messages/no-cache#github-actions
     - name: Cache dependencies
       uses: actions/cache@v2
       with:
-        path: ${{ steps.yarn-cache.outputs.dir }}
-        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+        path: |
+          ${{ steps.yarn-cache.outputs.dir }}
+          ${{ github.workspace }}/.next/cache
+        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}-nextjs-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
         restore-keys: |
-          ${{ runner.os }}-yarn-
+          ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}-nextjs-
 
     # reference: https://stackoverflow.com/a/58525708
     - run: yarn install --frozen-lockfile
     - run: yarn test
-    - run: yarn build
       env:
-        REACT_APP_GOOGLE_ANALYTICS_TRACKING_ENABLED: ${{ secrets.REACT_APP_GOOGLE_ANALYTICS_TRACKING_ENABLED }}
-        REACT_APP_GOOGLE_ANALYTICS_TRACKING_ID: ${{ secrets.REACT_APP_GOOGLE_ANALYTICS_TRACKING_ID }}
+        NEXT_PUBLIC_GOOGLE_ANALYTICS_TRACKING_ENABLED: ${{ secrets.NEXT_PUBLIC_GOOGLE_ANALYTICS_TRACKING_ENABLED }}
+        NEXT_PUBLIC_GOOGLE_ANALYTICS_TRACKING_ID: ${{ secrets.NEXT_PUBLIC_GOOGLE_ANALYTICS_TRACKING_ID }}
+
+    - name: Build (only for the active node version)
+      run: yarn build
+      env:
+        NEXT_PUBLIC_GOOGLE_ANALYTICS_TRACKING_ENABLED: ${{ secrets.NEXT_PUBLIC_GOOGLE_ANALYTICS_TRACKING_ENABLED }}
+        NEXT_PUBLIC_GOOGLE_ANALYTICS_TRACKING_ID: ${{ secrets.NEXT_PUBLIC_GOOGLE_ANALYTICS_TRACKING_ID }}
+      if: ${{ matrix.node-version == env.NODE_ACTIVE_LTS_VERSION }}
 
     - name: Prepare tag
       id: prepare_tag
@@ -68,7 +77,7 @@ jobs:
       uses: peaceiris/actions-gh-pages@v3
       with:
         github_token: ${{ secrets.GITHUB_TOKEN }}
-        publish_dir: ./build
+        publish_dir: ./out
         # reference: https://github.com/peaceiris/actions-gh-pages#%EF%B8%8F-create-git-tag
         tag_name: ${{ steps.prepare_tag.outputs.deploy_tag_name }}
         tag_message: 'Deployment ${{ steps.prepare_tag.outputs.tag_name }}'

.gitignore

@@ -8,19 +8,35 @@
 # testing
 /coverage
 
+# next.js
+/.next/
+/out/
+
 # production
 /build
 
 # misc
 .DS_Store
+*.pem
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
 
 ### JetBrains template
 # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm

.storybook/main.js

@@ -6,6 +6,6 @@ module.exports = {
   "addons": [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@storybook/preset-create-react-app"
+    'storybook-addon-next'
   ]
-}
+}

README.md

@@ -1,3 +1,27 @@
 # [personal-portfolio](https://htbkoo.github.io/personal-portfolio/) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/htbkoo/personal-portfolio/blob/master/LICENSE.md)
 
 Attempting to write my personal portfolio page again, this time with [`React`](https://github.com/facebook/react) + [`TypeScript`](https://github.com/Microsoft/TypeScript/)
+
+### Major updates
+1. [`v0.10.0`](https://github.com/htbkoo/personal-portfolio/releases/tag/v0.10.0) - migrated to [`Next.js`](https://nextjs.org/) from [`Create React App`](https://create-react-app.dev/)
+   1. As a bonus, the version of `React` is also upgraded to [`v18.0`](https://reactjs.org/blog/2022/03/29/react-v18.html) from `v17.0.2`
+
+### Common known issues
+
+#### Windows compatibility
+
+##### The `yarn run dev`, `yarn start` and `yarn build` does not work on Windows machine
+
+###### TL;DR solution
+Set the `yarn` / `npm` `script-shell` to `bash` (recommended) or `powershell` by running:
+1. For `yarn`, `yarn config set script-shell bash`
+1. For `npm`, configure the `script-shell` value at `.npmrc`
+
+###### Explanation
+This is because, according to [the issue described here at `cross-env`](https://github.com/kentcdodds/cross-env#windows-issues), `npm uses cmd by default and that doesn't support command substitution, so if you want to leverage that, then you need to update your .npmrc to set the script-shell to powershell. Learn more here.`
+
+###### Reference
+1. https://stackoverflow.com/questions/65953667/yarn-cant-run-any-script
+2. https://classic.yarnpkg.com/lang/en/docs/yarnrc/
+3. https://github.com/kentcdodds/cross-env/issues/192#issuecomment-513341729
+4. https://github.com/kentcdodds/cross-env#windows-issues 

README_nextjs.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+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.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
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+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.

__tests__/contact.test.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import Contact from "@/pages/contact";
+
+describe("<Contact/>", function () {
+    it("renders without crashing", () => {
+        const div = document.createElement("div");
+        // @ts-ignore: TODO: remove this once @types/react and @types/react-dom is upgraded to v18
+        const root = createRoot(div!);
+        root.render(<Contact />);
+        root.unmount();
+    });
+});

__tests__/index.test.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import Home from "@/pages/index";
+import { overrideGoogleAnalyticsRelatedProcessEnv } from "@/src/tests/utils/utils";
+
+describe("<Home/>", function () {
+    it("renders without crashing", () => {
+        overrideGoogleAnalyticsRelatedProcessEnv({ trackingEnabled: "false" });
+
+        const div = document.createElement("div");
+        // @ts-ignore: TODO: remove this once @types/react and @types/react-dom is upgraded to v18
+        const root = createRoot(div!);
+        root.render(<Home />);
+        root.unmount();
+    });
+
+    it("with GA enabled, renders without crashing", () => {
+        overrideGoogleAnalyticsRelatedProcessEnv({
+            trackingEnabled: "true",
+            trackingId: "someId",
+            testMode: "true",
+        });
+
+        const div = document.createElement("div");
+
+        // @ts-ignore: TODO: remove this once @types/react and @types/react-dom is upgraded to v18
+        const root = createRoot(div!);
+        root.render(<Home />);
+        root.unmount();
+    });
+});

__tests__/portfolio.test.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import Portfolio from "@/pages/portfolio";
+
+describe("<Portfolio/>", function () {
+    it("renders without crashing", () => {
+        const div = document.createElement("div");
+        // @ts-ignore: TODO: remove this once @types/react and @types/react-dom is upgraded to v18
+        const root = createRoot(div!);
+        root.render(<Portfolio />);
+        root.unmount();
+    });
+});

jest.config.js

@@ -0,0 +1,26 @@
+// reference: https://github.com/vercel/next.js/blob/canary/examples/with-jest/jest.config.js
+
+const nextJest = require("next/jest");
+
+const createJestConfig = nextJest({
+    // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+    dir: "./",
+});
+
+// Add any custom config to be passed to Jest
+const customJestConfig = {
+    setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+    moduleNameMapper: {
+        // Handle module aliases (this will be automatically configured for you soon)
+        // "^@/components/(.*)$": "<rootDir>/components/$1",
+
+        "^@/pages/(.*)$": "<rootDir>/pages/$1",
+        "^@/src/(.*)$": "<rootDir>/src/$1",
+        "^@/styles/(.*)$": "<rootDir>/styles/$1",
+        "^@/public/(.*)$": "<rootDir>/public/$1",
+    },
+    testEnvironment: "jest-environment-jsdom",
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig);

jest.setup.js

@@ -0,0 +1,8 @@
+// reference: https://github.com/vercel/next.js/blob/canary/examples/with-jest/jest.setup.js
+
+// Optional: configure or set up a testing framework before each test.
+// If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`
+
+// Used for __tests__/testing-library.js
+// Learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect'

next-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="next" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.