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?
kapa.ai
kapa.ai360d 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
kapa.ai360d ago
<@757608333799587931> kapa.ai is still learning and improving, please let us how it did by reacting below
continuing-cyan
continuing-cyan360d ago
but, I want to use the new App folder of next 13 @kapa.ai
continuing-cyan
continuing-cyan359d 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?
stormy-gold
stormy-gold359d 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.
continuing-cyan
continuing-cyan359d ago
Yeah! Thank you! I hasolved just now placing the refine pages inside an admin folder..
More Posts
how to pinned columns using datagridi tried to pin columns but it is not working where i check the mui doc i found there is no pinnedColnew separated pagehi I want to make a page that I can move to it only when I click on a button inside another page soHow to limit the display of resources from users parameters?I have two type of users. One without ParentUserID (admin) Another with parenUserId (employee who haOverride built-in notification messagesHello! I would like to use the built-in notification provider but pass my own messages and descriptHow to use `<AntdInferencer />` with Next.jsHello, the examples provided in the docs for using the inferencer components is using some `<Routes>How to install a previous version?As I can see that there is a previous version 3.xx.xx in the docs, how do we install that? Like whilhow to add parent attribute to resourcei tried to add a parent to my resource but there is no parent attributesredirect issueas soon as the page loads on the screen it should be redirected to the login page. I have made the llooking for nextjs landingpage + non-public area sampleHello everyone! 👋 I'm currently working on a project and was wondering if anyone has or knows of srefine x supabase: file upload issueHi, I'm trying to add a video upload section in my project, but I keep getting the error in the attaloginI have the Google Auth. I want to add the login using email and password and have implimented the foAuth ProviderWhen i am trying to vist autenticated page, it is checkAuth method to check is the user is authorizeclient side filter with filters.mode=off not workingHello refine community, filters.mode=off works as expected if I used column header filters. But ifbroken link to documentationSeems to be broken https://refine.dev/docs/ui-frameworks/antd/components/authpage/How do I pass invitation token with google auth to my backend?import { CredentialResponse } from "../interfaces/google"; export const Login: React.FC = () => { Using useRegister example, throws a type error.I'm using the example provided that's listed under pages/customRegisterPage: https://refine.dev/docsDeploying to DO app platform with FetchHello, So I have a fetch script on one of my edit pages that when the page loads it sends the ID ofIs that possible to implement more than one auth provider?Is that possible to implement more than one auth provider? At the moment i have only google authentiMigrating from existing projectGreetings! I was wondering how easy it is to go from a vanilla react project to use Refine. We haveuseLoginI'm looking for a headless example of using useLogin. Ideally I want to have a custom login page set