Routing Error

[verbal wadi]

Hi @sudden elbow. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

The error you're encountering, "NextRouter was not mounted," is a common issue in Next.js applications, especially when using the useRouter hook in certain contexts. Based on the provided knowledge sources, I can offer some insights and potential solutions:

1. Router Mounting: The error suggests that you're trying to access the router before it's fully mounted. This often happens during server-side rendering or when the component is rendered outside the context where the router is available NextRouter was not mounted (https://nextjs.org/docs/messages/next-router-not-mounted).

2. Client-side vs Server-side: Your component is marked with "use client", indicating it's a client component. However, the error suggests it's being executed in a server-side context where the router isn't available.

3. Pages Router vs App Router: The code you've provided uses useRouter from next/router, which is part of the Pages Router. If you're using the newer App Router, this could be causing conflicts.

To resolve this issue, you can try the following:

1. Ensure you're using the correct router for your Next.js setup. If you're using the App Router (which is likely given the "use client" directive), replace import { useRouter } from "next/router" with import { useRouter } from "next/navigation".

2. If you need to access route parameters in an App Router setup, you might need to use different methods. The useRouter hook in the App Router doesn't provide query parameters in the same way.

3. Consider using the useSearchParams hook for query parameters or useParams for dynamic route segments if you're using the App Router.

4. If you're intentionally using the Pages Router, make sure your component is only rendered on the client-side. You can use dynamic imports with ssr: false to ensure this.

Here's a modified version of your code that might work better with the App Router:

"use client";

import { Footer } from "@/components/footer";
import { useParams } from "next/navigation";

const ProfilePage = () => {
    const params = useParams();
    const username = params.USERNAME as string;

    if(!username) {
        return (
            <div>Loading...</div>
        )
    }

    return (
        <div className="min-h-full flex flex-col">
            <div className="flex flex-col items-center justify-center text-center gap-y-8 flex-1 px-6 pb-10">
                <p>This is a profile page for {username}</p>
            </div>
            <Footer />
        </div>
    )
}
 
export default ProfilePage;

This version uses useParams to access route parameters, which is more appropriate for the App Router. Remember to adjust your route configuration to match this approach.

If you continue to face issues, you may need to review your overall Next.js setup and ensure consistency between your router choice and component implementations.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: