I am using the new app Router in nextjs .getting Error:useRouter only works in Client Components. Add the "use client" directive to use it

Question

./app/layout.tsx
ReactServerComponentsError:

You have a Server Component that imports next/router. Use next/navigation instead.

Import trace:
  ./app/layout.tsx

if i remove use useRouter and use useNavigation then i get the following

Error: (0 , next_navigation__WEBPACK_IMPORTED_MODULE_2__.useNavigation) is not a function

Source
app/layout.tsx (18:30) @ useNavigation

  16 | children: React.ReactNode
  17 | }) {
> 18 | const router = useNavigation()
     |                            ^
  19 | 
  20 | const excludeHeader = router.pathname.startsWith('/admin')

if i add the use client on top of the file ,i get the following error

You are attempting to export "metadata" from a component marked with "use client", which is disallowed. Either remove the export, or the "use client" directive. Read more: https://beta.nextjs.org/docs/api-reference/metadata

    ,-[/Users/veerpratap/Desktop/nodejs-projects/my-Next-apps/product-reviews/app/layout.tsx:5:1]
  5 | import MainHeader from './layout/main-header'
  6 | const inter = Inter({ subsets: ['latin'] })
  7 | 
  8 | export const metadata = {
    :              ^^^^^^^^
  9 |   title: 'Create Next App',
 10 |   description: 'Generated by create next app',
 11 | }

any way i can resolve this error

Does this answer your question? [You're importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with "use client"](https://stackoverflow.com/questions/74965849/youre-importing-a-component-that-needs-usestate-it-only-works-in-a-client-comp) — Youssouf Oumar, May 09 '23 at 08:29
do we have to define in every components if it is use client or use server — Veer Pratap, May 09 '23 at 08:51
By default, they are server components. To make it a client component, either the component should have "use client", or its parent, the component that's calling it. — Youssouf Oumar, May 09 '23 at 08:53
import './globals.css' import { Inter } from 'next/font/google' import { useRouter } from 'next/router' import MainHeader from './layout/main-header' const inter = Inter({ subsets: ['latin'] }) // export const metadata = { // title: 'Create Next App', // description: 'Generated by create next app', // } export default function RootLayout({ children, }: { children: React.ReactNode }) { const router = useRouter() const excludeHeader = router.pathname.startsWith('/admin') } — Veer Pratap, May 09 '23 at 09:25
Add `"use client"` at the top and remove that `export const metadata = {`. — Youssouf Oumar, May 09 '23 at 09:26
also even after using use state and removing metadata i am getting following error User Unhandled Runtime Error Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted Source app/layout.tsx (19:26) @ useRouter 17 | children: React.ReactNode 18 | }) { > 19 | const router = useRouter() | ^ 20 | 21 | const excludeHeader = router.pathname.startsWith('/admin') 22 | — Veer Pratap, May 09 '23 at 09:28

score 3 · Answer 1 · answered May 23 '23 at 22:00

3

This worked for me,

import { usePathname } from "next/navigation";
const pathname = usePathname();

useRouter from next/navigation doesn't export pathname etc anymore, as mentioned in the linked docs right before the Router Events section

answered May 23 '23 at 22:00

Can Rau

3,130
1
23
33

score 0 · Answer 2 · answered Aug 02 '23 at 06:30

0

This worked for me in next latest version you can import from next/navigation import { useRouter } from 'next/navigation'

answered Aug 02 '23 at 06:30

Bhautik zanzrukiya

1

score 0 · Answer 3 · answered Aug 31 '23 at 06:43

0

use client needs to be placed at the very top.

Something like this:

"use client";

import { useRouter } from "next/navigation";
export default function Home() {
  const router = useRouter();
}

answered Aug 31 '23 at 06:43

Shameel Uddin

511
2
10

I am using the new app Router in nextjs .getting Error:useRouter only works in Client Components. Add the "use client" directive to use it

3 Answers3