Skip to main content
Version: 2.xx.xx

Migration Guide

1.0.XX to 2.0.XX

Motivation behind breaking changes


Making resources property-based instead of component-based was necessary for Nextjs support. A property is also more flexible, dynamic and easier to configure compared to a component.


Router layer is abstracted from the core for mainly Nextjs support. This also creates the opportunity for any other router solution to be used.

Custom Pages

This is also related to abstracting away the router layer from core. Differences between (currently two) router provider are so big that adding a layer to cover both cases (possibly more in the future) is much harder to implement and maintain compared to letting everyone handle it with their own conventions. This also has the huge benefit of allowing maximum configurability for every respective provider.

@pankod/refine-codemod package handles the breaking changes for your project automatically, without any manual steps. It migrates your project from 1.x.x to 2.x.x.

Just cd into root folder of your project (where package.json is contained) and run this command:

npx @pankod/refine-codemod refine1-to-refine2

And it's done. Now your project uses refine@2.x.x.

Migrating your project manually

Updating the packages

Packages used by your app must be updated to ^2.xx.xx

npm i @pankod/refine@latest

<Resource/> to resources

<Resource/> is deprecated. Resources must be passed to resources prop instead.

import { Refine } from "@pankod/refine";
import dataProvider from "@pankod/refine-json-server";
import "@pankod/refine/dist/styles.min.css";

import { PostList, PostCreate, PostEdit, PostShow } from "pages/posts";

const API_URL = "";

const App: React.FC = () => {
return (
name: "posts",
list: PostList,
create: PostCreate,
edit: PostEdit,
show: PostShow,

export default App;


<Refine/> now requires a routerProvider. You can use packages @pankod/refine-react-router or @pankod/refine-nextjs-router provided by refine.

import { Refine } from "@pankod/refine";
import routerProvider from "@pankod/refine-react-router";

const App: React.FC = () => {
return <Refine routerProvider={routerProvider} />;

If you imported Link component from @pankod/refine, now you have to switch to @pankod/refine-react-router package to get the Link component. Like this:

// Old
// import { ..., Link } from "@pankod/refine";

// Now
import routerProvider from "@pankod/refine-react-router";

const Link = routerProvider.Link;

Custom Pages

routes prop of <Refine/> is deprecated. Custom routes must be handled by the router provider you choose. Refer to Custom Pages documentation for a detailed guide