2018-11-28 15:03:02 +01:00
|
|
|
{
|
2022-02-25 01:59:18 +01:00
|
|
|
"extends": "../../tsconfig-tsec.json",
|
2018-11-28 15:03:02 +01:00
|
|
|
"compilerOptions": {
|
2018-12-05 21:45:50 +01:00
|
|
|
"strict": true,
|
2018-11-28 15:03:02 +01:00
|
|
|
"module": "esnext",
|
|
|
|
|
"target": "ES2017",
|
|
|
|
|
"esModuleInterop": true,
|
2018-12-05 21:45:50 +01:00
|
|
|
"moduleResolution": "node",
|
2022-07-20 18:48:45 +02:00
|
|
|
"jsx": "react",
|
|
|
|
|
"stripInternal": true
|
2019-04-24 16:47:50 +02:00
|
|
|
},
|
2022-08-16 11:55:37 +02:00
|
|
|
"exclude": [
|
|
|
|
|
"dist",
|
|
|
|
|
"./*.d.ts",
|
|
|
|
|
"future/*.d.ts",
|
|
|
|
|
"image-types/global.d.ts",
|
`next/compat/router` (#42502)
After speaking with @timneutkens, this PR provides a smoother experience to users trying to migrate over to app without affecting users in pages.
This PR adds a new export available from `next/compat/router` that exposes a `useRouter()` hook that can be used in both `app/` and `pages/`. It differs from `next/router` in that it does not throw an error when the pages router is not mounted, and instead has a return type of `NextRouter | null`. This allows developers to convert components to support running in both `app/` and `pages/` as they are transitioning over to `app/`.
A component that before looked like this:
```tsx
import { useRouter } from 'next/router';
const MyComponent = () => {
const { isReady, query } = useRouter();
// ...
};
```
Will error when converted over to `next/compat/router`, as `null` cannot be destructured. Instead, developers will be able to take advantage of new hooks:
```tsx
import { useEffect } from 'react';
import { useRouter } from 'next/compat/router';
import { useSearchParams } from 'next/navigation';
const MyComponent = () => {
const router = useRouter() // may be null or a NextRouter instance
const searchParams = useSearchParams()
useEffect(() => {
if (router && !router.isReady) {
return
}
// In `app/`, searchParams will be ready immediately with the values, in
// `pages/` it will be available after the router is ready.
const search = searchParams.get('search')
// ...
}, [router, searchParams])
// ...
}
```
This component will now work in both `pages/` and `app/`. When the component is no longer used in `pages/`, you can remove the references to the compat router:
```tsx
import { useSearchParams } from 'next/navigation';
const MyComponent = () => {
const searchParams = useSearchParams()
// As this component is only used in `app/`, the compat router can be removed.
const search = searchParams.get('search')
// ...
}
```
Note that as of Next.js 13, calling `useRouter` from `next/router` will throw an error when not mounted. This now includes an error page that can be used to assist developers.
We hope to introduce a codemod that can convert instances of your `useRouter` from `next/router` to `next/compat/router` in the future.
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-11-07 19:16:28 +01:00
|
|
|
"compat/*.d.ts",
|
2022-10-14 03:59:22 +02:00
|
|
|
"legacy/*.d.ts",
|
2023-02-15 02:26:01 +01:00
|
|
|
"types/compiled.d.ts",
|
|
|
|
|
"navigation-types/*.d.ts",
|
|
|
|
|
"navigation-types/compat/*.d.ts"
|
2022-08-16 11:55:37 +02:00
|
|
|
]
|
2018-11-28 15:03:02 +01:00
|
|
|
}
|
