Refine•3y ago

Nextjs installation

There are lots of issues I am facing while installing refine with nextjs package, if anyone have created refine app with nextjs and supabase then please help me.

#nextjs #supabase

kapa.ai•6/26/23, 1:28 PM

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

kapa.ai•6/26/23, 1:29 PM

----------------------
To create a refine app with Next.js and Supabase, you can follow these steps:

First, create a refine app with the with-nextjs-appdirwith-nextjs-appdir example:

npm create refine-app@latest -- --example with-nextjs-appdir

npm create refine-app@latest -- --example with-nextjs-appdir

Source: With
app/
app/
Directory (https://refine.dev/docs/examples/next-js/nextjs-appdir)

Next, add the Supabase data provider to your existing refine app:

npm i @refinedev/supabase

npm i @refinedev/supabase

Source: Supabase Data Provider (https://refine.dev/docs/packages/documentation/data-providers/supabase)

Configure your refine app to use the Supabase data provider and set up the supabaseClientsupabaseClient with your Supabase URL and API key. You can find an example of how to do this in the Customizable Issue Tracker with Refine and Supabase (https://refine.dev/blog/customizable-issue-tracker-with-refine-and-supabase) blog post.

Please note that the example provided in the blog post is for a React-based refine app, so you may need to adjust the code accordingly for your Next.js app.

If you're still facing issues, please provide more specific details about the problems you're encountering, and I'll try to help you further.
----------------------

Note: you can ask me a follow up question by @ mentioning me again

Note: you can ask me a follow up question by @ mentioning me again

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

kapa.ai•6/26/23, 1:29 PM

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

colourful-plum•6/26/23, 1:54 PM

Would you mind sharing what's the issue, so we can help? Unfortunately, it's impossible to help without any context.

verbal-lime•6/26/23, 1:56 PM

Probably I have this same (with Hasura but it doesn't matter) on OSX. Solved by decreasing Nextjs version.

sacred-roseOP•6/28/23, 3:37 PM

@batuhanw how to install refine with stable version of app router

skinny-azure•6/29/23, 8:44 AM

@gautamvaishnav the documentation is really good, maybe have a look here? https://refine.dev/docs/packages/documentation/routers/nextjs/#basic-usage

Next.js | refine

refine provides router bindings and utilities for Next.js. This package will provide easy integration between refine and Next.js for both existing projects and new projects without giving up the benefits of Next.js.

sacred-roseOP•6/29/23, 8:45 AM

but in the refine app router setup, they are using experimental app router

sacred-roseOP•6/29/23, 8:45 AM

@bastianwegge .

skinny-azure•6/29/23, 8:47 AM

Where do you see that?

sacred-roseOP•6/29/23, 11:25 AM

https://refine.dev/docs/packages/documentation/routers/nextjs/#example-app

Next.js | refine

sacred-roseOP•6/29/23, 11:25 AM

from their official docs

skinny-azure•6/29/23, 2:03 PM

I think that's specifically a project for show-casing usage of the experimental appDir. Aren't you looking for something like this? https://github.com/refinedev/refine/tree/master/examples/with-nextjs

GitHub

refine/examples/with-nextjs at master · refinedev/refine

Build your React-based CRUD applications, without constraints.

Star to support our work! - refine/examples/with-nextjs at master · refinedev/refine