How to add custom page(like dashboard) in nextjs?
i want to add a dashboard page in refine base-on nextjs
7 Replies
Hi @Hawking. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To add a dashboard page in a Refine project based on Next.js, you can use the
Dashboard
prop in the <Refine>
component. Here's an example of how to do this:
1. First, create a custom dashboard component. For example, create a file called CustomDashboard.tsx
and add the following code:
2. Next, import the CustomDashboard
component in your App.tsx
file and pass it to the Dashboard
prop of the <Refine>
component:
This will set the custom dashboard component as the root route of your application. For more information, you can refer to the following extract: refine-pixels-3 > Adding CRUD Actions and Authentication > Implementing a Public Dashboard with Refine (https://refine.dev/blog/refine-pixels-3/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@1062560314371096576> kapa.ai is still learning and improving, please let us how it did by reacting below
overseas-lavender•2y ago
@kapa.ai it's not working
Let me check the knowledge base for you. One moment! :books:
----------------------
Hmm, I don't know enough to give you a confident answer yet. The information extracts provided do not cover the integration of Refine with Next.js specifically. However, you can refer to the Refine documentation for more information on how to work with Refine:
- Quickstart guide (https://refine.dev/docs/getting-started/quickstart/)
- Tutorial (https://refine.dev/docs/tutorial/introduction/index/)
Please note that the provided extracts are focused on Refine, which is a React-based framework, and not specifically tailored for Next.js integration.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------Quick Start Guide | refine
refine works on any environment that can run React (incl. CRA, Next.js, Remix, Vite etc.)
1. Build your first refine app | refine
About this Tutorial
<@1062560314371096576> kapa.ai is still learning and improving, please let us how it did by reacting below
unwilling-turquoise•2y ago
Hey @Hawking you can create your page at the route you like and if you like you can also add it to your
<Sider />
by defining it in the resources
array like this: