flat-fuchsia•2y ago

Front end and refine in the same project

I am trying to use Refine in just one project with the frontend of my nextjs 13 app dir project :). How this could be possible? Which is the best aproach?

7 Replies

kapa.ai•2y ago

Hi @denisforigo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To integrate Refine into your existing Next.js project, you can follow these steps: 1. Install the necessary packages:

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

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

2. Wrap your pages in a custom App component by modifying the _app.tsx file inside the pages folder:

import React from "react";
import { AppProps } from "next/app";
import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/nextjs-router";
import dataProvider from "@refinedev/simple-rest";

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;

import React from "react";
import { AppProps } from "next/app";
import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/nextjs-router";
import dataProvider from "@refinedev/simple-rest";

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;

Make sure to replace the API_URL with your own API endpoint. Keep in mind that this is a basic setup, and you might need to configure other aspects of Refine depending on your project requirements. For more information on integrating Refine with Next.js, you can refer to the documentation (https://refine.dev/docs/packages/documentation/routers/nextjs). Please note that I can only provide information based on the extracts provided, and Next.js 13 is not mentioned in the extracts. The instructions above should work for Next.js projects in general, but you might need to check the compatibility with Next.js 13 specifically. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@757608333799587931> kapa.ai is still learning and improving, please let us how it did by reacting below

flat-fuchsiaOP•2y ago

but, I want to use the new App folder of next 13 @kapa.ai

optimistic-gold•2y ago

we have appdir example https://github.com/refinedev/refine/tree/next/examples/with-nextjs-appdir

flat-fuchsiaOP•2y ago

Hi @alicanerdurmaz, thank you by your response. But if I want to create not refine page with same name, like post, how I could make this? There is some due to upgrade nextjs to 18.2.0?

conscious-sapphire•2y ago

I am currently facing the same problem. Did you already tried to add a separate app/refine-app/layout.tsx which includes refine? I am currently working on a project where I use refine in the root layout.tsx file and in case i need to add a page on the website which shouldn’t be in the refine Layout I just skipped the ThemedLayout component in these pages and need to make sure the root will not match a refine resource root name. Hope this helps… overall it feels lot more easier to use refine in nextjs app folder as in the page folder.

flat-fuchsiaOP•2y ago

Yeah! Thank you! I hasolved just now placing the refine pages inside an admin folder..

Front end and refine in the same project

Did you find this page helpful?