helpful-purple
helpful-purple4mo ago

Next.js App router

is there a way to start a next.js proyect with app routes instead pages routes using npm create refine-app@latest ?
9 Replies
kapa.ai
kapa.ai4mo ago
Hi @🌧 mati. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, Refine allows you to use the app/ structure in your Next.js apps. You can bootstrap a new project with the app/ structure using the create refine-app command. Here is the command you can use:
npm create refine-app@latest -- --example with-nextjs-appdir
npm create refine-app@latest -- --example with-nextjs-appdir
This command will bootstrap a new project with the app/ structure using the with-nextjs-appdir example. For more information, you can refer to the Refine Next.js documentation (https://refine.dev/docs/packages/list-of-packages/). Source: Refine Docs - Examples - Next-js - With app/ Directory (https://refine.dev/docs/examples/next-js/nextjs-appdir) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai4mo ago
<@164497367834296320> kapa.ai is still learning and improving, please let us know how it did by reacting below
helpful-purple
helpful-purple4mo ago
@kapa.ai it says: "Failed to install packages. You can try again manually." how can i install that manually ?
kapa.ai
kapa.ai4mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- If you're encountering issues with package installation, you can try to install them manually. Here's how you can do it: 1. First, navigate to your project directory using the cd command. For example, if your project name is crud-refine, you would use:
cd crud-refine
cd crud-refine
2. Once you're in the project directory, you can manually install the packages using the npm install command:
npm install
npm install
This command will read the package.json file in your project directory and install all the dependencies listed there. If you're still encountering issues, it might be due to your Node.js version. One of the maintainers suggested using Node.js version 18.19.0 or later. If you're new to Node.js, you might find nvm (Node Version Manager) useful. It helps manage multiple active Node.js versions. Source: Github Discussion - Failed to install packages (https://github.com/refinedev/refine/discussions/5575) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai4mo ago
<@164497367834296320> kapa.ai is still learning and improving, please let us know how it did by reacting below
helpful-purple
helpful-purple4mo ago
@kapa.ai is there a way to install a next.js project with app directory, nestJs as backedn service, ant design and custom auth as authentication logic?
kapa.ai
kapa.ai4mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can create a Next.js project with an app/ directory, NestJS as the backend service, Ant Design as the UI framework, and custom authentication logic using the create refine-app command. However, you'll need to manually set up the NestJS backend and custom authentication logic as create refine-app does not provide these options out of the box. Here's how you can create the project:
npm create refine-app@latest -- --example with-nextjs-appdir
npm create refine-app@latest -- --example with-nextjs-appdir
This command will create a new Next.js project with an app/ directory. During the setup, you can choose Ant Design as your UI framework. For the NestJS backend and custom authentication logic, you'll need to set them up manually. Refine provides a flexible and customizable framework, so you can integrate any backend service or authentication logic according to your needs. For more information on how to integrate a custom backend service or authentication logic, you can refer to the Refine documentation (https://refine.dev/docs). Please note that while Refine provides a lot of flexibility, it requires a good understanding of React and JavaScript to customize it according to your needs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai4mo ago
<@164497367834296320> kapa.ai is still learning and improving, please let us know how it did by reacting below
passive-yellow
passive-yellow4mo ago
Hello @matt.ho we have an open PR, which isn't merged yet for this one: https://github.com/pankod/superplate-core-plugins/pull/387 You can use npm create refine-app@latest -- --branch update-nextjs-to-appdir and select nextjs. You can also check our nextjs appdir example here: https://github.com/refinedev/refine/blob/master/examples/with-nextjs
GitHub
feat: refactor nextjs to appdir by alicanerdurmaz · Pull Request #3...
refinedev/refine#5573 this PR should be released first
GitHub
refine/examples/with-nextjs at master · refinedev/refine
A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. - refinedev/refine