nextjs - Refine

efficient-indigo · 2024-03-26T11:10:16.070Z

Hi everyone, what is the recommended way to build an app with Refine, using Next.js or React?

K

kapa.ai•3/26/24, 11:10 AM

Hi @vangelis191. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•3/26/24, 11:10 AM

----------------------
Refine supports both Next.js and React for building applications. However, the choice between Next.js and React depends on your specific use case and requirements.

Refine provides support for Server Side Rendering (SSR) with Next.js, which is a distinguishing feature that sets it apart from other frameworks. This feature allows you to develop both B2B and B2C applications, as well as admin panels. Refine follows Next.js conventions and provides helper modules when necessary. Here's a basic setup for SSR with Next.js:

npm i @pankod/refine @refinedev/nextjs-router  

// pages/_app.tsx
import { AppProps } from "next/app";  
import { Refine } from "@pankod/refine";  
import dataProvider from "@refinedev/simple-rest";  
import routerProvider from "@refinedev/nextjs-router";  

const API_URL = "<https://api.fake-rest.refine.dev";>  

function MyApp({ Component, pageProps }: AppProps): JSX.Element {  
 return (  
 <Refine  
 routerProvider={routerProvider}  
 dataProvider={dataProvider(API_URL)}  
 >  
 <Component {...pageProps} />  
 </Refine>  
 );  
}  

export default MyApp;

npm i @pankod/refine @refinedev/nextjs-router  

// pages/_app.tsx
import { AppProps } from "next/app";  
import { Refine } from "@pankod/refine";  
import dataProvider from "@refinedev/simple-rest";  
import routerProvider from "@refinedev/nextjs-router";  

const API_URL = "<https://api.fake-rest.refine.dev";>  

function MyApp({ Component, pageProps }: AppProps): JSX.Element {  
 return (  
 <Refine  
 routerProvider={routerProvider}  
 dataProvider={dataProvider(API_URL)}  
 >  
 <Component {...pageProps} />  
 </Refine>  
 );  
}  

export default MyApp;

npm i @pankod/refine @refinedev/nextjs-router  

// pages/_app.tsx
import { AppProps } from "next/app";  
import { Refine } from "@pankod/refine";  
import dataProvider from "@refinedev/simple-rest";  
import routerProvider from "@refinedev/nextjs-router";  

const API_URL = "<https://api.fake-rest.refine.dev";>  

function MyApp({ Component, pageProps }: AppProps): JSX.Element {  
 return (  
 <Refine  
 routerProvider={routerProvider}  
 dataProvider={dataProvider(API_URL)}  
 >  
 <Component {...pageProps} />  
 </Refine>  
 );  
}  

export default MyApp;

npm i @pankod/refine @refinedev/nextjs-router  

// pages/_app.tsx
import { AppProps } from "next/app";  
import { Refine } from "@pankod/refine";  
import dataProvider from "@refinedev/simple-rest";  
import routerProvider from "@refinedev/nextjs-router";  

const API_URL = "<https://api.fake-rest.refine.dev";>  

function MyApp({ Component, pageProps }: AppProps): JSX.Element {  
 return (  
 <Refine  
 routerProvider={routerProvider}  
 dataProvider={dataProvider(API_URL)}  
 >  
 <Component {...pageProps} />  
 </Refine>  
 );  
}  

export default MyApp;

Source (https://refine.dev/blog/refine-vs-react-admin#ssr---nextjs-support-1)

On the other hand, if you're starting a new project, Refine recommends using the

create refine-app

create refine-app

create refine-app

create refine-app command-line interface (CLI) to set up your project according to your preferences. This command will bootstrap a Next.js Refine template:

npm create refine-app@latest refine-storefront

npm create refine-app@latest refine-storefront

npm create refine-app@latest refine-storefront

npm create refine-app@latest refine-storefront

Source (https://refine.dev/blog/next-js-pwa#project-setup)

In conclusion, both Next.js and React are suitable for building applications with Refine. The choice depends on your project's specific needs and requirements.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•3/26/24, 11:10 AM

@690946936085282856 kapa.ai is still learning and improving, please let us know how it did by reacting below