rare-sapphire•4w ago

Refine with Nextjs and Shadcn ?

Is there a boilerplate or tutorial on how to use Refine with Nextjs and Shadcn?
I searched through the online documentation and found a tutorial on how to use Shadcn with Vite.js but I could not find one for Next.js.

2 Replies

kapa.ai•4w ago

Hi @Smilodon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Currently, there is no specific tutorial or boilerplate available for using Refine with both Next.js and Shadcn together. However, you can follow the steps to integrate Shadcn with Refine using Vite and then adapt those steps to a Next.js project. Here are the steps to integrate Shadcn with Refine using Vite, which you can adapt for Next.js: 1. Install TailwindCSS and Dependencies:

    npm install -D tailwindcss postcss autoprefixer

    npm install -D tailwindcss postcss autoprefixer

2. Initialize TailwindCSS:

    npx tailwindcss init -p

    npx tailwindcss init -p

This generates tailwind.config.js and postcss.config.js files and places them at the root folder. 3. Configure TypeScript: Update your tsconfig.json to include the path aliases for Shadcn components:

    {
      "compilerOptions": {
        "baseUrl": ".",
        "paths": {
          "@/*": ["./src/*"]
        }
      }
    }

    {
      "compilerOptions": {
        "baseUrl": ".",
        "paths": {
          "@/*": ["./src/*"]
        }
      }
    }

4. Configure Vite: Update your vite.config.ts file to set up the source path alias for Shadcn directories:

    import * as path from "path";
    import react from "@vitejs/plugin-react";
    import { defineConfig } from "vite";

    export default defineConfig({
      plugins: [react()],
      resolve: {
        alias: {
          "@": path.resolve(__dirname, "./src"),
        },
      },
    });

    import * as path from "path";
    import react from "@vitejs/plugin-react";
    import { defineConfig } from "vite";

    export default defineConfig({
      plugins: [react()],
      resolve: {
        alias: {
          "@": path.resolve(__dirname, "./src"),
        },
      },
    });

For Next.js, you can start by creating a Refine app with Next.js using the following command:

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

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

You can refer to the Refine Next.js documentation (https://refine.dev/docs/examples/next-js/) for more details. To integrate Shadcn, you will need to adapt the Vite-specific steps to Next.js. This involves configuring TailwindCSS and TypeScript similarly, but within the Next.js framework. For more detailed steps on integrating Shadcn with Refine, you can refer to the blog posts: - Integrating Shadcn with Refine (https://refine.dev/blog/shadcn-ui/#integrating-shadcn-with-refine) - Shadcn and Refine: Setting Source Path for Import Alias with Vite (https://refine.dev/blog/shadcn-ui/#shadcn-and-refine-setting-source-path-for-import-alias-with-vite) - Shadcn with Refine: Configuring TypeScript (https://refine.dev/blog/shadcn-ui/#shadcn-with-refine-configuring-typescript) If you need more specific guidance or examples, you might want to keep an eye on the Refine blog or discussions for updates on new tutorials and examples. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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