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
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:
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:
----------------------<@164497367834296320> kapa.ai is still learning and improving, please let us know how it did by reacting below
wise-whiteOP•12mo ago
@kapa.ai it says: "Failed to install packages. You can try again manually." how can i install that manually ?
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:
2. Once you're in the project directory, you can manually install the packages using the npm install command:
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:
----------------------<@164497367834296320> kapa.ai is still learning and improving, please let us know how it did by reacting below
wise-whiteOP•12mo 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?
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:
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:
----------------------<@164497367834296320> kapa.ai is still learning and improving, please let us know how it did by reacting below
deep-jade•12mo 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-nextjsGitHub
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