chore: mirgation nextJS

.env.example

@@ -1,3 +1,4 @@
-VITE_RPC_URL= # Example: https://localhost:8545
-VITE_PROJECT_ID= # Example API from WalletConnect: ""
-VITE_ALCHEMY_KEY= # API key from Alchemy 
+NEXT_PUBLIC_RPC_URL= # Example: https://localhost:8545
+NEXT_PUBLIC_PROJECT_ID= # Example API from WalletConnect: ""
+NEXT_PUBLIC_ALCHEMY_KEY= # API key from Alchemy 
+NEXT_PUBLIC_BASE_PATH= #"/some-base-path"

.eslintrc.cjs

@@ -2,22 +2,33 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:jsx-a11y/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:import/typescript",
-    "plugin:react/jsx-runtime",
-    "plugin:react-hooks/recommended",
-    "plugin:prettier/recommended",
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:jsx-a11y/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/typescript',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+    'plugin:prettier/recommended',
   ],
-  ignorePatterns: ["dist", ".eslintrc.cjs"],
-  parser: "@typescript-eslint/parser",
-  plugins: ["react-refresh"],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh', '@typescript-eslint'],
+  settings: {
+    react: {
+      version: 'detect', // Automatically detect the React version
+    },
+  },
   rules: {
-    "react-refresh/only-export-components": [
-      "warn",
-      { allowConstantExport: true },
-    ],
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    // Additional rules can be added here
   },
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      rules: {
+        'react/prop-types': 'off', // Turn off prop-types rule for TypeScript files
+      },
+    },
+  ],
 };

.github/workflows/build-test.yml

@@ -1,4 +1,4 @@
-name: Build and Test
+xname: Build and Test
 
 on:
   pull_request:
@@ -14,7 +14,7 @@ jobs:
       - name: Install Node
         uses: actions/setup-node@v3
         with:
-          node-version: "18.7"
+          node-version: "18.17"
           registry-url: "https://registry.npmjs.org"
 
       - name: Get yarn cache directory path

.gitignore

@@ -8,6 +8,8 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+.next
+next-env.d.ts
 dist
 dist-ssr
 *.local
@@ -24,4 +26,5 @@ dist-ssr
 *.sw?
 
 .eslintcache
-.env
+.env
+tsconfig.tsbuildinfo

next.config.mjs

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'export', // Outputs a Single-Page Application (SPA).
+  distDir: './dist', // Changes the build output directory to `./dist/`.
+};
+
+export default nextConfig;

package.json

@@ -5,19 +5,21 @@
   "type": "module",
   "license": "MIT",
   "author": "Wonderland",
+  "engines": {
+    "node": ">=18.17.0"
+  },
   "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview",
+    "dev": "next",
+    "build": "tsc && next build",
+    "preview": "next preview",
     "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
     "lint:fix": "yarn run lint -- --fix",
     "prettier": "prettier src --check",
     "prettier:fix": "yarn run prettier -- --write",
     "format": "yarn run prettier:fix && yarn run lint:fix",
     "format:check": "yarn run prettier && yarn run lint",
     "prepare": "husky install && wonderland-crypto-husky-checks install",
-    "test": "vitest run --dir src/tests/",
-    "test:watch": "vitest --dir src/tests/"
+    "test": "vitest"
   },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx}": "eslint --cache --fix",
@@ -26,6 +28,7 @@
   "dependencies": {
     "@rainbow-me/rainbowkit": "2.0.2",
     "@tanstack/react-query": "5.28.0",
+    "next": "14.1.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-router-dom": "6.15.0",
@@ -35,14 +38,14 @@
   "devDependencies": {
     "@defi-wonderland/crypto-husky-checks": "1.3.0",
     "@testing-library/jest-dom": "6.1.2",
-    "@testing-library/react": "14.0.0",
+    "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "14.4.3",
     "@types/lodash.merge": "4.6.7",
     "@types/react": "18.2.15",
     "@types/react-dom": "18.2.7",
     "@typescript-eslint/eslint-plugin": "6.0.0",
     "@typescript-eslint/parser": "6.0.0",
-    "@vitejs/plugin-react": "4.0.3",
+    "@vitejs/plugin-react": "^4.2.1",
     "eslint": "8.45.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-import": "2.28.1",
@@ -52,13 +55,11 @@
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-react-refresh": "0.4.3",
     "husky": "8.0.3",
-    "jsdom": "22.1.0",
+    "jsdom": "^24.0.0",
     "lodash.merge": "4.6.2",
     "prettier": "3.0.3",
     "styled-components": "6.0.7",
-    "typescript": "5.0.2",
-    "vite": "4.4.5",
-    "vite-tsconfig-paths": "4.2.0",
-    "vitest": "0.34.3"
+    "typescript": "^5.4.2",
+    "vitest": "^1.4.0"
   }
 }

src/config/env.ts

@@ -1,11 +1,11 @@
 import { Env } from '~/types';
 
 export const getEnv = (): Env => {
-  const { VITE_RPC_URL, VITE_PROJECT_ID, VITE_ALCHEMY_KEY } = import.meta.env;
+  const { NEXT_PUBLIC_RPC_URL, NEXT_PUBLIC_PROJECT_ID, NEXT_PUBLIC_ALCHEMY_KEY } = process.env;
 
   return {
-    RPC_URL: VITE_RPC_URL,
-    PROJECT_ID: VITE_PROJECT_ID,
-    ALCHEMY_KEY: VITE_ALCHEMY_KEY,
+    RPC_URL: NEXT_PUBLIC_RPC_URL || '',
+    PROJECT_ID: NEXT_PUBLIC_PROJECT_ID || '',
+    ALCHEMY_KEY: NEXT_PUBLIC_ALCHEMY_KEY || '',
   };
 };

src/containers/Footer/index.tsx

@@ -1,40 +1,9 @@
-import styled from 'styled-components';
-
 export const Footer = () => {
   return (
-    <FooterContainer>
+    <>
       <h1>Footer</h1>
-      <Subtitle>
-        <p>Made with 💜 by</p>
-        <a href='https://defi.sucks'>Wonderland</a>
-      </Subtitle>
-    </FooterContainer>
+      <p>Made with 💜 by</p>
+      <a href='https://defi.sucks'>Wonderland</a>
+    </>
   );
 };
-
-const FooterContainer = styled.div`
-  display: flex;
-  height: 8rem;
-  padding: 0 8rem;
-  align-items: center;
-  justify-content: space-between;
-  background-color: ${({ theme }) => theme.headerBackground};
-  border-top: ${({ theme }) => theme.border};
-  width: 100%;
-  max-width: 100vw;
-`;
-
-const Subtitle = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 0.8rem;
-
-  p {
-    display: inline-block;
-  }
-
-  a {
-    text-decoration: none;
-    color: inherit;
-  }
-`;

src/containers/Header/index.tsx

@@ -1,6 +1,4 @@
 import { ConnectButton } from '@rainbow-me/rainbowkit';
-import styled from 'styled-components';
-
 import { useStateContext } from '~/hooks';
 import { THEME_KEY } from '~/utils';
 
@@ -18,31 +16,10 @@ export const Header = () => {
   };
 
   return (
-    <HeaderContainer>
+    <div>
       <h1>Logo</h1>
-      <ThemeButton onClick={handleThemeChange}>{theme === 'dark' ? '🌞' : '🌕'}</ThemeButton>
+      <button onClick={handleThemeChange}>{theme === 'dark' ? '🌞' : '🌕'}</button>
       <ConnectButton />
-    </HeaderContainer>
+    </div>
   );
 };
-
-const HeaderContainer = styled.div`
-  display: flex;
-  height: 8rem;
-  padding: 0 8rem;
-  align-items: center;
-  justify-content: space-between;
-  background-color: ${({ theme }) => theme.headerBackground};
-  border-bottom: ${({ theme }) => theme.border};
-  width: 100%;
-  max-width: 100vw;
-  z-index: 100;
-`;
-
-const ThemeButton = styled.button`
-  background-color: inherit;
-  border: none;
-  outline: none;
-  font-size: 2.2rem;
-  cursor: pointer;
-`;

src/containers/Landing/index.tsx

@@ -0,0 +1,3 @@
+export const Landing = () => {
+  return <h1 data-testid='boilerplate-title'>Web3 React Boilerplate</h1>;
+};