userouter is null for app folder in next js 13

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

    Operating System:
      Platform: linux
      Arch: x64
      Version: #1 SMP Fri Apr 2 22:23:49 UTC 2021
    Binaries:
      Node: 16.15.0
      npm: 8.19.2
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.0.0
      eslint-config-next: 13.0.0
      react: 18.2.0
      react-dom: 18.2.0

warn  - Latest canary version not detected, detected: "13.0.0", newest: "12.3.2-canary.43".

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

I am using a redirect component in the new app directory where useRouter is coming off as null

app/pages.tsx

'use client'
import { Redirect } from 'src/util/Redirect'
export default Redirect

src/component/Redirect.tsx

'use client'

import { useEffect } from 'react'
import { useRouter } from 'next/router'
import languageDetector from './languageDetector'

export const useRedirect = (to?: string) => {
  const router = useRouter()
//router here is null
  to = to || router.asPath

  // language detection
  useEffect(() => {
    const detectedLng = languageDetector.detect()
    if (to?.startsWith('/' + detectedLng) && router.route === '/404') {
      // prevent endless loop
      router.replace('/' + detectedLng + router.route)
      return
    }

    languageDetector.cache?.(detectedLng ?? 'en')
    router.replace('/' + detectedLng + to)
  })

  return <></>
}

export const Redirect = () => {
  useRedirect()
  return <></>
}

Expected Behavior

useRouter should return the router object

Link to reproduction

https://stackblitz.com/edit/github-fdiksh-6amcyc?file=app%2Fpage.ts,src%2FRedirect.ts

To Reproduce

Mentioned above

[HW13]

The new useRouter hook should be imported from next/navigation. It looks like Redirect.tsx is importing from the old hook’s location (next/router). The beta docs have a guide on migrating to the new hook -> https://beta.nextjs.org/docs/upgrade-guide#step-4-migrating-routing-hooks

[dephraiim]

You need to import from next/navigation in the new version.

import { useRouter } from 'next/navigation';