NextRouter was not mounted.

[theterrificm]

Getting this error despite running router inside my page component.

app\profile\page.jsx

'use client'
import { useState, useEffect } from 'react'
import { useSession } from 'next-auth/react'
import { useRouter } from 'next/router'

import Profile from '@/src/components/Profile'

const MyProfile = () => {

  const {data: session} = useSession();
  const router = useRouter();

  const [posts, setPosts] = useState([])

  useEffect(()=>{

    const fetchPosts = async ()=>{
      const response = await fetch(`/api/users/${session?.user.id}/posts`)
      const data = await response.json()

      setPosts(data)
    }

    if (session?.user.id){
      fetchPosts()
    } 

  }, [session?.user.id]) 

  const handleEdit = (post) => {

    router.push(`/update-prompt?id=${post._id}`)

  }

  const handleDelete = async (post) => {

  }

  return (
    <Profile 
      name="My"
      desc="Welcome to your personalized profile page"
      data={posts}
      handleEdit={handleEdit}
      handleDelete={handleDelete}
    /> // Profile
  )
}

export default MyProfile

Tried everything, any help would be appreciated.

[theterrificm]

Can't get that. Why?

[theterrificm]

My bad the problem was with my import statement.

The correct statement is: import { useRouter } from 'next/navigation'

And i was importing with import { useRouter } from 'next/router'