test fix dynamic route

.github/workflows/nextjs.yml

@@ -1,93 +1,26 @@
-# Sample workflow for building and deploying a Next.js site to GitHub Pages
-#
-# To get started with Next.js see: https://nextjs.org/docs/getting-started
-#
-name: Deploy Next.js site to Pages
+# .github/workflows/deploy.yml
+name: Deploy Next.js to GitHub Pages
 
 on:
-  # Runs on pushes targeting the default branch
   push:
-    branches: ["main"]
-
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
-
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
-# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
-concurrency:
-  group: "pages"
-  cancel-in-progress: false
+    branches:
+      - main
 
 jobs:
-  # Build job
   build:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Detect package manager
-        id: detect-package-manager
-        run: |
-          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
-            echo "manager=yarn" >> $GITHUB_OUTPUT
-            echo "command=install" >> $GITHUB_OUTPUT
-            echo "runner=yarn" >> $GITHUB_OUTPUT
-            exit 0
-          elif [ -f "${{ github.workspace }}/package.json" ]; then
-            echo "manager=npm" >> $GITHUB_OUTPUT
-            echo "command=ci" >> $GITHUB_OUTPUT
-            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
-            exit 0
-          else
-            echo "Unable to determine package manager"
-            exit 1
-          fi
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: "20"
-          cache: ${{ steps.detect-package-manager.outputs.manager }}
-      - name: Setup Pages
-        uses: actions/configure-pages@v5
-        with:
-          # Automatically inject basePath in your Next.js configuration file and disable
-          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
-          #
-          # You may remove this line if you want to manage the configuration yourself.
-          static_site_generator: next
-      - name: Restore cache
-        uses: actions/cache@v4
-        with:
-          path: |
-            .next/cache
-          # Generate a new cache whenever packages or source files change.
-          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
-          # If source files changed but packages didn't, rebuild from a prior cache.
-          restore-keys: |
-            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
       - name: Install dependencies
-        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
-      - name: Build with Next.js
-        run: ${{ steps.detect-package-manager.outputs.runner }} next build
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: ./out
+        run: yarn install
+
+      - name: Build Next.js app
+        run: yarn next build && yarn next export
 
-  # Deployment job
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
-    needs: build
-    steps:
       - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./out

app/[username]/page.tsx

@@ -1,15 +1,16 @@
 "use client"
 import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom'; // Change this
 import Preview from '@/components/Preview';
-import { useParams } from 'next/navigation';
 import { useBlockchain } from "@/context/BlockchainProvider";
 import { useContractMethods } from '@/hooks/useContractMethods';
 import { useGlobalState } from '@/context/GlobalStateContext';
 import { parseProfileData } from '@/lib/utils';
 
 
 export default function UserProfile() {
-  const params = useParams();
+  const { username } = useParams(); // Adjusted for react-router
+
   const {
     handleConnectWallet,
     signer,
@@ -19,21 +20,11 @@ export default function UserProfile() {
 
   const {
     setUserProfile,
-
   } = useGlobalState();
 
   const { getProfileByUsername } = useContractMethods();
 
-  const [username, setUsername] = useState<string>("")
-  const [isFetching, setIsFetching] = useState<boolean>(false)
-
-
-  // Ensure that username is treated as a string and decode it from URL encoding
-  useEffect(() => {
-    const rawUsername = Array.isArray(params.username) ? params.username[0] : params.username;
-    const cleanUsername = decodeURIComponent(rawUsername).startsWith('@') ? rawUsername.slice(3) : rawUsername;
-    setUsername(cleanUsername);
-  }, [params.username]);
+  const [isFetching, setIsFetching] = useState<boolean>(false);
 
   useEffect(() => {
     if (isConnecting) return;
@@ -43,29 +34,25 @@ export default function UserProfile() {
   }, [isConnected, isConnecting, handleConnectWallet]);
 
   useEffect(() => {
-    if (isConnected && signer && username.length > 0 && !isFetching) {
+    if (isConnected && signer && username && !isFetching) {
       setIsFetching(true);
       getProfileByUsername(username).then(res => {
         const cleanedData = parseProfileData(res);
-        setUserProfile(
-          {
-            avatar: '',//todo what to do?
-            username: username,
-            web2Items: cleanedData.web2Items,
-            web3Items: cleanedData.web3Items
-          }
-        )
+        setUserProfile({
+          avatar: '', // placeholder, adjust if needed
+          username: username,
+          web2Items: cleanedData.web2Items,
+          web3Items: cleanedData.web3Items,
+        });
       })
         .catch(err => {
           console.log(err);
         }).finally(() => {
           setIsFetching(false);
-        })
+        });
     }
   }, [isConnected, signer, username, getProfileByUsername, setUserProfile]);
 
-  // fetch the profile data using a public rpc node
-  // set the profile data into the global state 
   return (
     <div>
       <div className='text-center'>
@@ -74,7 +61,6 @@ export default function UserProfile() {
       </div>
 
       {isConnected && !isFetching ? <Preview isPreview={false} /> : ''}
-
     </div>
   );
 }

next.config.mjs

@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    output: "standalone"
+    trailingSlash: true,
 };
 
 export default nextConfig;

package.json

@@ -33,6 +33,7 @@
     "react-dom": "^18",
     "react-hook-form": "^7.53.0",
     "react-redux": "^9.1.2",
+    "react-router-dom": "^6.26.2",
     "react-select": "^5.8.0",
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.5.2",

public/404.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="refresh" content="0; URL='/'">
+  <script type="text/javascript">
+    // Redirect to the root, preserving the path as a hash.
+    var path = window.location.pathname;
+    window.location.replace('/#' + path);
+  </script>
+</head>
+<body>
+</body>
+</html>

yarn.lock

@@ -671,6 +671,11 @@
     redux-thunk "^3.1.0"
     reselect "^5.1.0"
 
+"@remix-run/[email protected]":
+  version "1.19.2"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.19.2.tgz#0c896535473291cb41f152c180bedd5680a3b273"
+  integrity sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==
+
 "@rtsao/scc@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@rtsao/scc/-/scc-1.1.0.tgz#927dd2fae9bc3361403ac2c7a00c32ddce9ad7e8"
@@ -2898,6 +2903,21 @@ react-redux@^9.1.2:
     "@types/use-sync-external-store" "^0.0.3"
     use-sync-external-store "^1.0.0"
 
+react-router-dom@^6.26.2:
+  version "6.26.2"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.26.2.tgz#a6e3b0cbd6bfd508e42b9342099d015a0ac59680"
+  integrity sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==
+  dependencies:
+    "@remix-run/router" "1.19.2"
+    react-router "6.26.2"
+
+[email protected]:
+  version "6.26.2"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.26.2.tgz#2f0a68999168954431cdc29dd36cec3b6fa44a7e"
+  integrity sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==
+  dependencies:
+    "@remix-run/router" "1.19.2"
+
 react-select@^5.8.0:
   version "5.8.1"
   resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.8.1.tgz#3284a93b7633b5e893306b2a8007ea0f793e62b9"