34 KiB
@refinedev/nextjs-router
5.5.5
Patch Changes
- #5425
190af9fce2
Thanks @aliemir! - Updated@refinedev/core
peer dependencies to latest (^4.46.1
)
5.5.4
Patch Changes
- #5114
00a9252c5de
Thanks @alicanerdurmaz! - feat:next
updated to latest version.
5.5.3
Patch Changes
- #5114
00a9252c5de
Thanks @alicanerdurmaz! - feat:next
updated to latest version.
5.5.2
Patch Changes
-
#5022
80513a4e42f
Thanks @BatuhanW! - chore: update README.md- fix grammar errors.
- make all README.md files consistent.
- add code example code snippets.
5.5.1
Patch Changes
-
#5022
80513a4e42f
Thanks @BatuhanW! - chore: update README.md- fix grammar errors.
- make all README.md files consistent.
- add code example code snippets.
5.5.0
Minor Changes
- #4741
026ccf34356
Thanks @aliemir! - AddedsideEffects: false
topackage.json
to help bundlers tree-shake unused code.
5.4.0
Minor Changes
- #4741
026ccf34356
Thanks @aliemir! - AddedsideEffects: false
topackage.json
to help bundlers tree-shake unused code.
5.3.2
Patch Changes
- #4466
a398c19b023
Thanks @aliemir! - Fixed the unhandled nullablepathname
issue returning fromusePathname
hook for theappDir
router.
5.3.1
Patch Changes
- #4466
a398c19b023
Thanks @aliemir! - Fixed the unhandled nullablepathname
issue returning fromusePathname
hook for theappDir
router.
5.3.0
Minor Changes
-
#4313
28fe67047a0
Thanks @abdellah711! - feat: dynamic window title for NextJSpages
directoryThis feature enables users to generate document titles for each page in NextJS
pages
directory. To activate it, users need to include theDocumentTitleHandler
component within the<Refine>
component. By default, theDocumentTitleHandler
will generate titles using thegenerateDefaultDocumentTitle
exported from@refinedev/core
.The
DocumentTitleHandler
component accepts an optional prop calledhandler
, which is a callback function. This function is triggered whenever thepathname
changes and receives an object with the following parameters:{ resource, // 'posts' action, // 'create' params, // {id: 1} pathname, // '/posts/create' autoGeneratedTitle; // 'Create new Post | refine' }
The
handler
callback should return the new title based on the provided parameters.To update the title in a child component, the user can use the
useDocumentTitle
hook. It accepts either a string representing the new title or an object with the propertyi18nKey
if the app supports multiple languages.useDocumentTitle({ i18nKey: "documentTitle.default" });
Note that this hook doesn't support SSR, and it will generate the titles in the client-side only.
5.2.0
Minor Changes
-
#4313
28fe67047a0
Thanks @abdellah711! - feat: dynamic window title for NextJSpages
directoryThis feature enables users to generate document titles for each page in NextJS
pages
directory. To activate it, users need to include theDocumentTitleHandler
component within the<Refine>
component. By default, theDocumentTitleHandler
will generate titles using thegenerateDefaultDocumentTitle
exported from@refinedev/core
.The
DocumentTitleHandler
component accepts an optional prop calledhandler
, which is a callback function. This function is triggered whenever thepathname
changes and receives an object with the following parameters:{ resource, // 'posts' action, // 'create' params, // {id: 1} pathname, // '/posts/create' autoGeneratedTitle; // 'Create new Post | refine' }
The
handler
callback should return the new title based on the provided parameters.To update the title in a child component, the user can use the
useDocumentTitle
hook. It accepts either a string representing the new title or an object with the propertyi18nKey
if the app supports multiple languages.useDocumentTitle({ i18nKey: "documentTitle.default" });
Note that this hook doesn't support SSR, and it will generate the titles in the client-side only.
5.1.6
Patch Changes
- #4160
9dc8ba1dd81
Thanks @joshbaumann! - fix: unsaved changes prompt not showing when the browser is refreshed.
5.1.5
Patch Changes
- #4160
9dc8ba1dd81
Thanks @joshbaumann! - fix: unsaved changes prompt not showing when the browser is refreshed.
5.1.4
Patch Changes
- #3987
d7d68e3ff68
Thanks @aliemir! - AddisReady
check toparse
method for/pages
to wait until the correct values are returned from therouter
.
5.1.3
Patch Changes
- #3987
d7d68e3ff68
Thanks @aliemir! - AddisReady
check toparse
method for/pages
to wait until the correct values are returned from therouter
.
5.1.2
Patch Changes
- #3893
d8c0a2f1cd1
Thanks @aliemir! - Fixed the export ofRefineRoutes
at/app
path. (Thanks to @thomas-advantitge for the #3863)
5.1.1
Patch Changes
- #3893
d8c0a2f1cd1
Thanks @aliemir! - Fixed the export ofRefineRoutes
at/app
path. (Thanks to @thomas-advantitge for the #3863)
5.1.0
Minor Changes
-
Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk! We're releasing a new way to connect your router to refine.
The legacy
routerProvider
and its exports are now deprecated but accessible at@refinedev/nextjs-router/legacy-app
and@refinedev/nextjs-router/legacy-pages
.The new
routerBindings
are smaller and more flexible than the previos one.New
routerBindings
exportNew
routerBindings
contains following properties;go
: Which returns a function to handle the navigation innext
. It accepts a config object and navigates to the given path. UsesuseRouter
hook under the hood.back
: Which returns a function to handle the navigation innext
. It navigates back to the previous page. UsesuseRouter
hook under the hood.parse
: Which returns a function to parse the given path and returns theresource
,id
,action
and additionalparams
. UsesuseRouter
for/pages
dir andusePathname
anduseSearchParams
for/app
dir.Link
: A component that acceptsto
prop and renders a link to the given path. UsesLink
component fromnext/link
under the hood.
Complemetary Components
-
RefineRoutes
- A component that renders the routes for the resources when the actions are defined as components. This can be used to achieve the legacy behavior ofrouterProvider
prop.RefineRoutes
component accepts a render function as a child and passesJSX.Element
if there's a match for the given path,undefined
is passed otherwise. You can use this in[[...refine]]
route to render the matching action component for a resource. We're encouraging our users to use file based routing instead of[[...refine]]
route which provides more flexibility and a better development experience with its performance benefits. -
NavigateToResource
- A component that navigates to the firstlist
action of theresources
array of<Refine>
. Optionally, you can pass aresource
prop to navigate tolist
action of the resource. This can be placed at theindex
route of your app to redirect to the first resource. -
UnsavedChangesNotifier
- This component handles the prompt when the user tries to leave the page with unsaved changes. It can be placed under theRefine
component.
-
Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk!
AuthProvider
is renamed toLegacyAuthProvider
with refine@4. Components and functions are updated to supportLegacyAuthProvider
. -
Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk!
parseTableParams
helper is added to let users parse the query params in SSR methods to persistsyncWithLocation
feature in tables. -
Thanks @aliemir, @alicanerdurmaz, @batuhanW, @salihozdemir, @yildirayunlu, @recepkutuk! Moving to the
@refinedev
scope 🎉🎉Moved to the
@refinedev
scope and updated our packages to use the new scope. From now on, all packages will be published under the@refinedev
scope with their new names.Now, we're also removing the
refine
prefix from all packages. So, the@pankod/refine-core
package is now@refinedev/core
,@pankod/refine-antd
is now@refinedev/antd
, and so on.
Patch Changes
4.5.0
Minor Changes
- #3822
0baa99ba787
Thanks @BatuhanW! - - refine v4 release announcement added to "postinstall". - refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x
4.4.0
Minor Changes
- #3822
0baa99ba787
Thanks @BatuhanW! - - refine v4 release announcement added to "postinstall". - refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x
4.3.0
Minor Changes
- #3387
a4731bd8fb4
Thanks @vanflux! - Forwarding ref on RefineLink component
4.2.0
Minor Changes
- #3387
a4731bd8fb4
Thanks @vanflux! - Forwarding ref on RefineLink component
4.1.0
Minor Changes
-
#3140
102bfbf3283
Thanks @aliemir! - - Bumped Next.js to 13- Added support for experimental
appDir
option innext.config.js
to allow for the latest Next.js features.
pages
directoryCurrent support for
pages
directory has not changed and will continue to work as before. It will be supported as long asNext.js
continues to support and prompts it as the stable way of working withNext.js
.appDir
optionappDir
option is a new experimental feature inNext.js
that introduces a bunch of new features. It is currently in beta and is not stable. It is not recommended to use it in production. But can be used alongside the currentpages
directory support.To use
appDir
option, you need to add it to yournext.config.js
file.// next.config.js module.exports = { /* ... */ experimental: { appDir: true, }, };
Using
appDir
with refineWe've needed to make some changes to the
@pankod/refine-nextjs-router
to make it work with the current structure of theapp
directory feature. To make sure these do not break the current support forpages
directory, we've added a new exports at the sub path@pankod/refine-nextjs-router/app
that can be used with theappDir
option.Note
To make optional catch-all routes to work with the
app
directory, you need to define them as directories unlike the option of defining them as files withpages
directory.You need to use
NextRouteComponent
from@pankod/refine-nextjs-router/app
instead ofNextRouteComponent
from@pankod/refine-nextjs-router
when usingappDir
option.Inside your
layout
file, you need to bindparams
torouterProvider
to make sure@pankod/refine-nextjs-router
can work properly with the new structure.// app/[[...refine]]/layout.tsx "use client"; import routerProvider from "@pankod/refine-nextjs-router/app"; const Layout = ({ children, params }) => { return ( <Refine routerProvider={routerProvider.apply({ params })} /* ... */ > {children} </Refine> ); };
Warning
Please note that, unlike the
routerProvider
from the@pankod/refine-nextjs-router
,routerProvider
from@pankod/refine-nextjs-router/app
is a function and you need to bindparams
to make it work properly.// app/[[...refine]]/page.tsx "use client"; import { NextRouteComponent } from "@pankod/refine-nextjs-router/app"; export default NextRouteComponent;
Warning
You need to add
"use client";
directive to bothlayout.tsx
andpage.tsx
insideapp/[[...refine]]
directory.Warning
checkAuthentication
does not work withappDir
. We're aiming to release a substitute for it using middleware but for now its not included in this release. - Added support for experimental
4.0.0
Major Changes
-
#3140
102bfbf3283
Thanks @aliemir! - - Bumped Next.js to 13- Added support for experimental
appDir
option innext.config.js
to allow for the latest Next.js features.
pages
directoryCurrent support for
pages
directory has not changed and will continue to work as before. It will be supported as long asNext.js
continues to support and prompts it as the stable way of working withNext.js
.appDir
optionappDir
option is a new experimental feature inNext.js
that introduces a bunch of new features. It is currently in beta and is not stable. It is not recommended to use it in production. But can be used alongside the currentpages
directory support.To use
appDir
option, you need to add it to yournext.config.js
file.// next.config.js module.exports = { /* ... */ experimental: { appDir: true, }, };
Using
appDir
with refineWe've needed to make some changes to the
@pankod/refine-nextjs-router
to make it work with the current structure of theapp
directory feature. To make sure these do not break the current support forpages
directory, we've added a new exports at the sub path@pankod/refine-nextjs-router/app
that can be used with theappDir
option.Note
To make optional catch-all routes to work with the
app
directory, you need to define them as directories unlike the option of defining them as files withpages
directory.You need to use
NextRouteComponent
from@pankod/refine-nextjs-router/app
instead ofNextRouteComponent
from@pankod/refine-nextjs-router
when usingappDir
option.Inside your
layout
file, you need to bindparams
torouterProvider
to make sure@pankod/refine-nextjs-router
can work properly with the new structure.// app/[[...refine]]/layout.tsx "use client"; import routerProvider from "@pankod/refine-nextjs-router/app"; const Layout = ({ children, params }) => { return ( <Refine routerProvider={routerProvider.apply({ params })} /* ... */ > {children} </Refine> ); };
Warning
Please note that, unlike the
routerProvider
from the@pankod/refine-nextjs-router
,routerProvider
from@pankod/refine-nextjs-router/app
is a function and you need to bindparams
to make it work properly.// app/[[...refine]]/page.tsx "use client"; import { NextRouteComponent } from "@pankod/refine-nextjs-router/app"; export default NextRouteComponent;
Warning
You need to add
"use client";
directive to bothlayout.tsx
andpage.tsx
insideapp/[[...refine]]
directory.Warning
checkAuthentication
does not work withappDir
. We're aiming to release a substitute for it using middleware but for now its not included in this release. - Added support for experimental
3.38.0
Minor Changes
-
Added
handleRefineParams
helper function to handle catch-all refine params. -
Added ability to parse catch-all refine route in Next.js router. This way, instead of creating multiple pages, users can only create one page at the root
[[...refine]].tsx
and handle all params for the app. -
Added ability to manage the initial route of refine by binding
initialRoute
variable toNextRouteComponent
component.
3.37.0
Minor Changes
-
Added
handleRefineParams
helper function to handle catch-all refine params. -
Added ability to parse catch-all refine route in Next.js router. This way, instead of creating multiple pages, users can only create one page at the root
[[...refine]].tsx
and handle all params for the app. -
Added ability to manage the initial route of refine by binding
initialRoute
variable toNextRouteComponent
component.
3.36.0
Minor Changes
-
#2486
ee4d0d112a
Thanks @aliemir! - AddedhandleRefineParams
helper function to handle catch-all refine params. -
#2486
ee4d0d112a
Thanks @aliemir! - Added ability to parse catch-all refine route in Next.js router. This way, instead of creating multiple pages, users can only create one page at the root[[...refine]].tsx
and handle all params for the app. -
#2486
ee4d0d112a
Thanks @aliemir! - Added ability to manage the initial route of refine by bindinginitialRoute
variable toNextRouteComponent
component.
3.35.0
Minor Changes
- Add
initialData
support toDashboardPage
for@pankod/refine-nextjs-router
.
3.34.0
Minor Changes
- #2142
dd00de215a
Thanks @ozkalai! - AddinitialData
support toDashboardPage
for@pankod/refine-nextjs-router
.
3.33.0
Minor Changes
- Update type declaration generation with
tsc
instead oftsup
for better navigation throughout projects source code.
3.32.0
Minor Changes
- #2440
0150dcd070
Thanks @aliemir! - Update type declaration generation withtsc
instead oftsup
for better navigation throughout projects source code.
3.31.3
Patch Changes
- Fixed default login page is
<LoginPage>
.
-
🎉 Added
AuthPage
component to therefine
app. This page is used to login, register, forgot password and update password. Login page is default page and oldLoginPage
component is deprecated.New Auth Hooks
📌 Added
useRegister
hook. This hook is used to register new user.useRegister
falls into register function ofAuthProvider
.📌 Added
useForgotPassword
hook. This hook is used to forgot password.useForgotPassword
falls intoforgotPassword
function ofAuthProvider
.📌 Added
useUpdatePassword
hook. This hook is used to update password.useUpdatePassword
falls intoupdatePassword
function ofAuthProvider
.- <LoginPage> + <AuthPage>
New
AuthPage
props:interface IAuthPageProps extends IAuthCommonProps { type?: "login" | "register" | "forgotPassword" | "updatePassword"; } interface IAuthCommonProps { submitButton?: React.ReactNode; registerLink?: React.ReactNode; loginLink?: React.ReactNode; forgotPasswordLink?: React.ReactNode; updatePasswordLink?: React.ReactNode; backLink?: React.ReactNode; providers?: IProvider[]; } interface IProvider { name: string; icon?: React.ReactNode; label?: string; }
3.31.2
Patch Changes
- #2415
f7c98f0ef9
Thanks @biskuvit! - Fixed default login page is<LoginPage>
.
3.31.1
Patch Changes
-
#2299
a02cb9e8ef
Thanks @biskuvit! - 🎉 AddedAuthPage
to therefine
app. This page is used to login, register, forgot password and update password. Login page is default page and oldLoginPage
component is deprecated.New Auth Hooks
📌 Added
useRegister
hook. This hook is used to register new user.useRegister
falls into register function ofAuthProvider
.📌 Added
useForgotPassword
hook. This hook is used to forgot password.useForgotPassword
falls intoforgotPassword
function ofAuthProvider
.📌 Added
useUpdatePassword
hook. This hook is used to update password.useUpdatePassword
falls intoupdatePassword
function ofAuthProvider
.- <LoginPage> + <AuthPage>
New
AuthPage
props:interface IAuthPageProps extends IAuthCommonProps { type?: "login" | "register" | "forgotPassword" | "updatePassword"; } interface IAuthCommonProps { registerLink?: React.ReactNode; loginLink?: React.ReactNode; forgotPasswordLink?: React.ReactNode; updatePasswordLink?: React.ReactNode; backLink?: React.ReactNode; providers?: IProvider[]; } interface IProvider { name: string; icon?: React.ReactNode; label?: string; }
Add
AuthPage
as a default page to Routers📌 Added
AuthPage
to therefine-nextjs-router
. Default page isAuthPage
.📌 Added
AuthPage
to therefine-react-location
. Default page isAuthPage
.📌 Added
AuthPage
to therefine-react-router-v6
. Default page isAuthPage
.📌 Added
AuthPage
to therefine-remix-router
. Default page isAuthPage
.
3.31.0
Minor Changes
- Add React@18 support 🚀
3.30.0
Minor Changes
- #1718
b38620d842
Thanks @omeraplak! - Add React@18 support 🚀
3.29.0
Minor Changes
-
Pass the full
resource
to theaccessControlProvider
can method. This will enable Attribute Based Access Control (ABAC), for example granting permissions based on the value of a field in the resource object.const App: React.FC = () => { <Refine // other providers and props accessControlProvider={{ can: async ({ resource, action, params }) => { if (resource === "posts" && action === "edit") { return Promise.resolve({ can: false, reason: "Unauthorized", }); } // or you can access directly *resource object // const resourceName = params?.resource?.name; // const anyUsefulOption = params?.resource?.options?.yourUsefulOption; // if (resourceName === "posts" && anyUsefulOption === true && action === "edit") { // return Promise.resolve({ // can: false, // reason: "Unauthorized", // }); // } return Promise.resolve({ can: true }); }, }} />; };
3.28.0
Minor Changes
-
e78b181b12
Thanks @omeraplak! - Pass the fullresource
to theaccessControlProvider
can method. This will enable Attribute Based Access Control (ABAC), for example granting permissions based on the value of a field in the resource object.const App: React.FC = () => { <Refine // other providers and props accessControlProvider={{ can: async ({ resource, action, params }) => { if (resource === "posts" && action === "edit") { return Promise.resolve({ can: false, reason: "Unauthorized", }); } // or you can access directly *resource object // const resourceName = params?.resource?.name; // const anyUsefulOption = params?.resource?.options?.yourUsefulOption; // if (resourceName === "posts" && anyUsefulOption === true && action === "edit") { // return Promise.resolve({ // can: false, // reason: "Unauthorized", // }); // } return Promise.resolve({ can: true }); }, }} />; };
3.27.0
Minor Changes
-
All of the refine packages have dependencies on the
@pankod/refine-core
package. So far we have managed these dependencies withpeerDependencies
+dependencies
but this causes issues like #2183. (having more than one @pankod/refine-core version in node_modules and creating different instances)Managing as
peerDependencies
+devDependencies
seems like the best way for now to avoid such issues.
3.26.0
Minor Changes
-
#2217
b4aae00f77
Thanks @omeraplak! - All of the refine packages have dependencies on the@pankod/refine-core
package. So far we have managed these dependencies withpeerDependencies
+dependencies
but this causes issues like #2183. (having more than one @pankod/refine-core version in node_modules and creating different instances)Managing as
peerDependencies
+devDependencies
seems like the best way for now to avoid such issues.
3.25.6
Patch Changes
-
Created a wrapper
<Link>
component for handlinghref
andto
props. When usingto
the wrapper will pass it to thehref
prop. -
Updated dependencies []:
- @pankod/refine-core@3.36.0
3.25.5
Patch Changes
-
#2061
0237725cf3
Thanks @salihozdemir! - Created a wrapper<Link>
component for handlinghref
andto
props. When usingto
the wrapper will pass it to thehref
prop. -
Updated dependencies [
ecde34a9b3
,635cfe9fdb
]:- @pankod/refine-core@3.35.0
3.25.4
Patch Changes
-
Add
legacyBehavior: false
to<Link/>
component to migrate to the new Next.js Link behavior. next.js#36436 -
Updated dependencies []:
- @pankod/refine-core@3.34.0
3.25.3
Patch Changes
-
#2021
a0a895cae4
Thanks @aliemir! - AddlegacyBehavior: false
to<Link/>
component to migrate to the new Next.js Link behavior. next.js#36436 -
Updated dependencies [
d96ba1e9c8
,b257d87fef
,12f08ae6a3
]:- @pankod/refine-core@3.33.0
3.25.2
Patch Changes
- We've updated Next.js version to
12.1.6
3.25.1
Patch Changes
- #1951
cc5f9ae78a
Thanks @omeraplak! - We've updated Next.js version to12.1.6
3.22.2
Patch Changes
-
#1873
2deb19babf
Thanks @aliemir! - Removed dummy default values from internal contexts. Updated contexts:- Auth
- Access Control
- Notification
- Translation (i18n)
- unsavedWarn
BREAKING:
useGetLocale
hook now can returnundefined
instead of a fallback value ofen
in cases ofi18nProvider
beingundefined
. -
Updated dependencies [
2deb19babf
]:- @pankod/refine-core@3.23.2