fixed nextjs ssg build issue

src/app/nostr/channel/page.tsx

@@ -12,9 +12,13 @@ import { dateToUnix, hoursAgo } from '@utils/getDate';
 import useLocalStorage from '@rehooks/local-storage';
 import { useSetAtom } from 'jotai';
 import { useResetAtom } from 'jotai/utils';
+import { useSearchParams } from 'next/navigation';
 import { useContext, useEffect, useRef } from 'react';
 
-export default function Page({ params }: { params: { id: string } }) {
+export default function Page() {
+  const searchParams = useSearchParams();
+  const id = searchParams.get('channel-id');
+
   const [pool]: any = useContext(RelayContext);
   const [activeAccount]: any = useLocalStorage('account', {});
 
@@ -40,7 +44,7 @@ export default function Page({ params }: { params: { id: string } }) {
           since: dateToUnix(hoursAgo(24, now.current)),
         },
         {
-          '#e': [params.id],
+          '#e': [id],
           kinds: [42],
           since: dateToUnix(hoursAgo(24, now.current)),
         },
@@ -66,13 +70,13 @@ export default function Page({ params }: { params: { id: string } }) {
     return () => {
       unsubscribe();
     };
-  }, [pool, activeAccount.pubkey, params.id, setChannelMessages, resetChannelReply, resetChannelMessages]);
+  }, [pool, id, activeAccount.pubkey, setChannelMessages, resetChannelReply, resetChannelMessages]);
 
   return (
     <div className="flex h-full w-full flex-col justify-between">
       <ChannelMessages />
       <div className="shrink-0 p-3">
-        <FormChannel eventId={params.id} />
+        <FormChannel eventId={id} />
       </div>
     </div>
   );

src/app/nostr/chat/page.tsx

@@ -10,9 +10,13 @@ import { FULL_RELAYS } from '@stores/constants';
 import useLocalStorage from '@rehooks/local-storage';
 import { useSetAtom } from 'jotai';
 import { useResetAtom } from 'jotai/utils';
+import { useSearchParams } from 'next/navigation';
 import { useContext, useEffect } from 'react';
 
-export default function Page({ params }: { params: { pubkey: string } }) {
+export default function Page() {
+  const searchParams = useSearchParams();
+  const pubkey = searchParams.get('pubkey');
+
   const [pool]: any = useContext(RelayContext);
   const [activeAccount]: any = useLocalStorage('account', {});
 
@@ -27,13 +31,13 @@ export default function Page({ params }: { params: { pubkey: string } }) {
       [
         {
           kinds: [4],
-          authors: [params.pubkey],
+          authors: [pubkey],
           '#p': [activeAccount.pubkey],
         },
         {
           kinds: [4],
           authors: [activeAccount.pubkey],
-          '#p': [params.pubkey],
+          '#p': [pubkey],
         },
       ],
       FULL_RELAYS,
@@ -45,13 +49,13 @@ export default function Page({ params }: { params: { pubkey: string } }) {
     return () => {
       unsubscribe();
     };
-  }, [params.pubkey, activeAccount.pubkey, setChatMessages, pool]);
+  }, [pubkey, activeAccount.pubkey, setChatMessages, pool]);
 
   return (
     <div className="flex h-full w-full flex-col justify-between">
       <MessageList />
       <div className="shrink-0 p-3">
-        <FormChat receiverPubkey={params.pubkey} />
+        <FormChat receiverPubkey={pubkey} />
       </div>
     </div>
   );

src/app/nostr/newsfeed/[id]/page.tsx

@@ -1,5 +0,0 @@
-'use client';
-
-export default function Page({ params }: { params: { id: string } }) {
-  return <div className="scrollbar-hide flex h-full flex-col gap-2 overflow-y-auto py-3">{params.id}</div>;
-}

src/app/nostr/newsfeed/note/page.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+
+export default function Page() {
+  const searchParams = useSearchParams();
+  const id = searchParams.get('event-id');
+
+  return <div className="scrollbar-hide flex h-full flex-col gap-2 overflow-y-auto py-3">{id}</div>;
+}

src/app/nostr/user/page.tsx

@@ -6,11 +6,15 @@ import ProfileMetadata from '@components/profile/metadata';
 import ProfileNotes from '@components/profile/notes';
 
 import * as Tabs from '@radix-ui/react-tabs';
+import { useSearchParams } from 'next/navigation';
+
+export default function Page() {
+  const searchParams = useSearchParams();
+  const pubkey = searchParams.get('pubkey');
 
-export default function Page({ params }: { params: { id: string } }) {
   return (
     <div className="scrollbar-hide h-full w-full overflow-y-auto">
-      <ProfileMetadata id={params.id} />
+      <ProfileMetadata id={pubkey} />
       <Tabs.Root className="flex w-full flex-col" defaultValue="notes">
         <Tabs.List className="flex border-b border-zinc-800">
           <Tabs.Trigger
@@ -33,13 +37,13 @@ export default function Page({ params }: { params: { id: string } }) {
           </Tabs.Trigger>
         </Tabs.List>
         <Tabs.Content value="notes">
-          <ProfileNotes id={params.id} />
+          <ProfileNotes id={pubkey} />
         </Tabs.Content>
         <Tabs.Content value="followers">
-          <ProfileFollowers id={params.id} />
+          <ProfileFollowers id={pubkey} />
         </Tabs.Content>
         <Tabs.Content value="following">
-          <ProfileFollows id={params.id} />
+          <ProfileFollows id={pubkey} />
         </Tabs.Content>
       </Tabs.Root>
     </div>

src/app/onboarding/create/page.tsx

@@ -68,7 +68,7 @@ export default function Page() {
     // broadcast
     pool.publish(event, relays);
     // redirect to next step
-    router.push(`/onboarding/create/${pubkey}/${privkey}`);
+    router.push(`/onboarding/create/step-2?pubkey=${pubkey}&privkey=${privkey}`);
   }, [pool, pubkey, privkey, metadata, relays, router]);
 
   return (

src/app/onboarding/create/step-2/page.tsx

@@ -9,7 +9,7 @@ import { arrayToNIP02 } from '@utils/transform';
 
 import { createClient } from '@supabase/supabase-js';
 import { CheckCircle } from 'iconoir-react';
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { Key, useCallback, useContext, useEffect, useState } from 'react';
 
@@ -53,11 +53,12 @@ const initialList = [
   { pubkey: 'ff04a0e6cd80c141b0b55825fed127d4532a6eecdb7e743a38a3c28bf9f44609' },
 ];
 
-export default function Page({ params }: { params: { slug: string } }) {
+export default function Page() {
   const router = useRouter();
+  const searchParams = useSearchParams();
 
-  const pubkey = params.slug[0];
+  const pubkey = searchParams.get('pubkey');
-  const privkey = params.slug[1];
+  const privkey = searchParams.get('privkey');
 
   const [pool, relays]: any = useContext(RelayContext);
   const [loading, setLoading] = useState(false);

src/app/onboarding/login/page.tsx

@@ -40,7 +40,7 @@ export default function Page() {
         privkey = nip19.decode(privkey).data;
       }
       if (typeof getPublicKey(privkey) === 'string') {
-        router.push(`/onboarding/login/${privkey}`);
+        router.push(`/onboarding/login/step-2?privkey=${privkey}`);
       }
     } catch (error) {
       setError('key', {

src/app/onboarding/login/step-2/page.tsx

@@ -11,17 +11,20 @@ import { nip02ToArray } from '@utils/transform';
 
 import Image from 'next/image';
 import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
 import { getPublicKey } from 'nostr-tools';
 import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 
-export default function Page({ params }: { params: { privkey: string } }) {
+export default function Page() {
-  const [pool, relays]: any = useContext(RelayContext);
+  const searchParams = useSearchParams();
+  const privkey = searchParams.get('privkey');
 
+  const [pool, relays]: any = useContext(RelayContext);
   const [profile, setProfile] = useState({ metadata: null });
   const [done, setDone] = useState(false);
   const timeout = useRef(null);
 
-  const pubkey = getPublicKey(params.privkey);
+  const pubkey = getPublicKey(privkey);
 
   const createPlebs = useCallback(async (tags: string[]) => {
     for (const tag of tags) {
@@ -43,7 +46,7 @@ export default function Page({ params }: { params: { privkey: string } }) {
       (event: any) => {
         if (event.kind === 0) {
           // create account
-          createAccount(pubkey, params.privkey, event.content);
+          createAccount(pubkey, privkey, event.content);
           // update state
           setProfile({
             metadata: JSON.parse(event.content),
@@ -71,7 +74,7 @@ export default function Page({ params }: { params: { privkey: string } }) {
       unsubscribe();
       clearTimeout(timeout.current);
     };
-  }, [pool, relays, pubkey, params.privkey, createPlebs]);
+  }, [pool, relays, pubkey, privkey, createPlebs]);
 
   return (
     <div className="grid h-full w-full grid-rows-5">

src/components/channels/browseChannelItem.tsx

@@ -1,40 +0,0 @@
-import { ImageWithFallback } from '@components/imageWithFallback';
-
-import { DEFAULT_AVATAR, DEFAULT_CHANNEL_BANNER } from '@stores/constants';
-
-import { useChannelMetadata } from '@utils/hooks/useChannelMetadata';
-
-export const BrowseChannelItem = ({ data }: { data: any }) => {
-  const channel = useChannelMetadata(data.event_id, data.metadata);
-
-  return (
-    <div className="h-64 w-full rounded-md bg-zinc-900">
-      <div className="relative h-24">
-        <div className="h-24 w-full rounded-t-md bg-zinc-800">
-          <ImageWithFallback
-            src={channel?.banner || DEFAULT_CHANNEL_BANNER}
-            alt={data.id}
-            fill={true}
-            className="h-full w-full rounded-t-md object-cover"
-          />
-        </div>
-        <div className="relative -top-6 z-10 px-4">
-          <div className="relative h-11 w-11 rounded-md bg-white">
-            <ImageWithFallback
-              src={channel?.picture || DEFAULT_AVATAR}
-              alt={data.id}
-              fill={true}
-              className="rounded-md object-cover ring-1 ring-black/50"
-            />
-          </div>
-        </div>
-      </div>
-      <div className="mt-7 px-4">
-        <div className="flex flex-col">
-          <h3 className="w-full truncate font-semibold leading-tight text-zinc-100">{channel?.name}</h3>
-        </div>
-        <div className="line-clamp-3 text-sm text-zinc-400">{channel?.about}</div>
-      </div>
-    </div>
-  );
-};

src/components/channels/channelListItem.tsx

@@ -10,7 +10,7 @@ export const ChannelListItem = ({ data }: { data: any }) => {
 
   return (
     <ActiveLink
-      href={`/nostr/channels/${data.event_id}`}
+      href={`/nostr/channel?channel-id=${data.event_id}`}
       activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
       className="inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900"
     >

src/components/chats/chatList.tsx

@@ -18,7 +18,7 @@ export default function ChatList() {
   const profile = JSON.parse(activeAccount.metadata);
 
   const openSelfChat = () => {
-    router.push(`/nostr/chats/${activeAccount.pubkey}`);
+    router.push(`/nostr/chat?pubkey=${activeAccount.pubkey}`);
   };
 
   useEffect(() => {

src/components/chats/chatListItem.tsx

@@ -11,7 +11,7 @@ export const ChatListItem = ({ pubkey }: { pubkey: string }) => {
 
   return (
     <ActiveLink
-      href={`/nostr/chats/${pubkey}`}
+      href={`/nostr/chat?pubkey=${pubkey}`}
       activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
       className="inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900"
     >

src/components/note/base.tsx

@@ -22,13 +22,13 @@ export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
 
   const openUserPage = (e) => {
     e.stopPropagation();
-    router.push(`/nostr/users/${event.pubkey}`);
+    router.push(`/nostr/user?pubkey=${event.pubkey}`);
   };
 
   const openThread = (e) => {
     const selection = window.getSelection();
     if (selection.toString().length === 0) {
-      router.push(`/newsfeed/${event.parent_id}`);
+      router.push(`/nostr/newsfeed/note?id=${event.parent_id}`);
     } else {
       e.stopPropagation();
     }
@@ -37,7 +37,7 @@ export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
   return (
     <div
       onClick={(e) => openThread(e)}
-      className="relative z-10 m-0 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 px-3 py-5 hover:bg-black/20"
+      className="relative z-10 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 px-3 py-5 hover:bg-black/20"
     >
       {parentNote()}
       <div className="relative z-10 flex flex-col">

src/components/note/parent.tsx

@@ -7,19 +7,18 @@ import { createNote, getNoteByID } from '@utils/storage';
 import { getParentID } from '@utils/transform';
 
 import useLocalStorage from '@rehooks/local-storage';
-import { memo, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { memo, useCallback, useContext, useEffect, useState } from 'react';
 
 export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
   const [pool, relays]: any = useContext(RelayContext);
 
   const [activeAccount]: any = useLocalStorage('account', {});
   const [event, setEvent] = useState(null);
-  const unsubscribe = useRef(null);
 
   const content = event ? contentParser(event.content, event.tags) : '';
 
   const fetchEvent = useCallback(async () => {
-    unsubscribe.current = pool.subscribe(
+    const unsubscribe = pool.subscribe(
       [
         {
           ids: [id],
@@ -50,9 +49,13 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
         unsubscribeOnEose: true,
       }
     );
+
+    return () => {
+      unsubscribe();
+    };
   }, [activeAccount.id, id, pool, relays]);
 
-  const checkNoteExist = useCallback(async () => {
+  const checkNoteIsSaved = useCallback(async () => {
     getNoteByID(id)
       .then((res) => {
         if (res) {
@@ -65,14 +68,16 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
   }, [fetchEvent, id]);
 
   useEffect(() => {
-    checkNoteExist();
+    let ignore = false;
+
+    if (!ignore) {
+      checkNoteIsSaved();
+    }
 
     return () => {
-      if (unsubscribe.current) {
+      ignore = true;
-        unsubscribe.current();
-      }
     };
-  }, [checkNoteExist]);
+  }, [checkNoteIsSaved]);
 
   if (event) {
     return (

src/components/note/quote.tsx

@@ -6,19 +6,18 @@ import { createNote, getNoteByID } from '@utils/storage';
 import { getParentID } from '@utils/transform';
 
 import useLocalStorage from '@rehooks/local-storage';
-import { memo, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { memo, useCallback, useContext, useEffect, useState } from 'react';
 
 export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
   const [pool, relays]: any = useContext(RelayContext);
 
   const [activeAccount]: any = useLocalStorage('account', {});
   const [event, setEvent] = useState(null);
-  const unsubscribe = useRef(null);
 
   const content = event ? contentParser(event.content, event.tags) : '';
 
   const fetchEvent = useCallback(async () => {
-    unsubscribe.current = pool.subscribe(
+    const unsubscribe = pool.subscribe(
       [
         {
           ids: [id],
@@ -48,9 +47,13 @@ export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
         unsubscribeOnEose: true,
       }
     );
+
+    return () => {
+      unsubscribe();
+    };
   }, [activeAccount.id, id, pool, relays]);
 
-  const checkNoteExist = useCallback(async () => {
+  const checkNoteIsSaved = useCallback(async () => {
     getNoteByID(id)
       .then((res) => {
         if (res) {
@@ -63,14 +66,16 @@ export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
   }, [fetchEvent, id]);
 
   useEffect(() => {
-    checkNoteExist();
+    let ignore = false;
+
+    if (!ignore) {
+      checkNoteIsSaved();
+    }
 
     return () => {
-      if (unsubscribe.current) {
+      ignore = true;
-        unsubscribe.current();
-      }
     };
-  }, [checkNoteExist]);
+  }, [checkNoteIsSaved]);
 
   if (event) {
     return (

src/components/note/quoteRepost.tsx

@@ -21,7 +21,7 @@ export const NoteQuoteRepost = memo(function NoteQuoteRepost({ event }: { event:
   };
 
   return (
-    <div className="relative z-10 m-0 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 px-3 py-5 hover:bg-black/20">
+    <div className="relative z-10 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 px-3 py-5 hover:bg-black/20">
       <div className="relative z-10 flex flex-col pb-5">
         <div className="absolute left-[21px] top-0 h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600"></div>
         <UserQuoteRepost pubkey={event.pubkey} time={event.created_at} />

src/components/note/rootNote.tsx

@@ -5,7 +5,7 @@ import { UserExtend } from '@components/user/extend';
 import { contentParser } from '@utils/parser';
 
 import { useRouter } from 'next/navigation';
-import { memo, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { memo, useCallback, useContext, useEffect, useState } from 'react';
 
 export const RootNote = memo(function RootNote({ event }: { event: any }) {
   const router = useRouter();
@@ -14,17 +14,15 @@ export const RootNote = memo(function RootNote({ event }: { event: any }) {
   const [data, setData] = useState(null);
   const [content, setContent] = useState('');
 
-  const unsubscribe = useRef(null);
-
   const openUserPage = (e) => {
     e.stopPropagation();
-    router.push(`/nostr/users/${event.pubkey}`);
+    router.push(`/nostr/user?pubkey=${event.pubkey}`);
   };
 
   const openThread = (e) => {
     const selection = window.getSelection();
     if (selection.toString().length === 0) {
-      router.push(`/nostr/newsfeed/${event.id}`);
+      router.push(`/nostr/newsfeed/note?id=${event.parent_id}`);
     } else {
       e.stopPropagation();
     }
@@ -32,7 +30,7 @@ export const RootNote = memo(function RootNote({ event }: { event: any }) {
 
   const fetchEvent = useCallback(
     async (id: string) => {
-      unsubscribe.current = pool.subscribe(
+      const unsubscribe = pool.subscribe(
         [
           {
             ids: [id],
@@ -50,17 +48,29 @@ export const RootNote = memo(function RootNote({ event }: { event: any }) {
           unsubscribeOnEose: true,
         }
       );
+
+      return () => {
+        unsubscribe();
+      };
     },
     [pool, relays]
   );
 
   useEffect(() => {
+    let ignore = false;
+
+    if (!ignore) {
       if (typeof event === 'object') {
         setData(event);
         setContent(contentParser(event.content, event.tags));
       } else {
         fetchEvent(event);
       }
+    }
+
+    return () => {
+      ignore = true;
+    };
   }, [event, fetchEvent]);
 
   if (data) {