Nextjs app router

How setup refine using the latest nextjs app router and shadcn ui

3 Replies

Hi @Yash pede. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, there isn't enough information on how to set up refine using the latest Next.js app router and shadcn UI. However, I can guide you on how to set up refine with Next.js and a general approach to adding a UI library. To set up a Next.js refine project, you can use the create refine-app command-line interface (CLI). Here's how you can do it:

npm create refine-app@latest <name of your application>

npm create refine-app@latest <name of your application>

You will be prompted to choose your preferences for the project. Select the following options to proceed:

✔ Choose a project template · refine(Next.js)
✔ What would you like to name your project?: · <name of your application>
✔ Choose your backend service to connect: · <Your choice>
✔ Do you want to use a UI Framework?: · Headless
✔ Do you want to add example pages?: · No
✔ Do you need i18n (Internationalization) support?: · No
✔ Choose a package manager: · npm

✔ Choose a project template · refine(Next.js)
✔ What would you like to name your project?: · <name of your application>
✔ Choose your backend service to connect: · <Your choice>
✔ Do you want to use a UI Framework?: · Headless
✔ Do you want to add example pages?: · No
✔ Do you need i18n (Internationalization) support?: · No
✔ Choose a package manager: · npm

After setting up the project, you can add the shadcn UI library to your project. Usually, this involves installing the library via npm or yarn and then importing the components you need in your project. However, the exact steps may vary depending on the specific library. Please note that the information on how to integrate shadcn UI with refine is not provided in the extracts. For more detailed instructions, you should refer to the official documentation of shadcn UI and refine. For more information on how to add SSR-Next.js to your Refine project, you can check out this guide (https://refine.dev/docs/guides-and-concepts/ssr/nextjs/). Sources: - Building React admin panel with NextUI and refine (https://refine.dev/blog/next-ui-react-admin-panel#what-is-refine) - Build a Progressive Web App (PWA) with Next.js (https://refine.dev/blog/next-js-pwa#project-setup) - Refine vs AdminBro - Comparison Admin Panel Framework (https://refine.dev/blog/refine-vs-adminbro#ssr---nextjs-support) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

foreign-sapphire•8mo ago

no no but i want to use the app directory setup for nextjs