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
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:
2. Wrap your pages in a custom App component by modifying the
_app.tsx
file inside the pages
folder:
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:
----------------------<@757608333799587931> kapa.ai is still learning and improving, please let us how it did by reacting below
fair-rose•16mo ago
but, I want to use the new App folder of next 13 @kapa.ai
harsh-harlequin•16mo ago
we have appdir example
https://github.com/refinedev/refine/tree/next/examples/with-nextjs-appdir
fair-rose•16mo 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?
adverse-sapphire•16mo 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.
fair-rose•16mo ago
Yeah! Thank you! I hasolved just now placing the refine pages inside an admin folder..