How to add custom page(like dashboard) in nextjs?

i want to add a dashboard page in refine base-on nextjs
7 Replies
kapa.ai
kapa.ai16mo ago
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:
import React from 'react';

const CustomDashboard: React.FC = () => {
return <div>Custom Dashboard Page</div>;
};

export default CustomDashboard;
import React from 'react';

const CustomDashboard: React.FC = () => {
return <div>Custom Dashboard Page</div>;
};

export default CustomDashboard;
2. Next, import the CustomDashboard component in your App.tsx file and pass it to the Dashboard prop of the <Refine> component:
import React from 'react';
import { Refine } from '@refinedev/core';
// ... other imports ...
import CustomDashboard from './CustomDashboard';

const App: React.FC = () => {
return (
<Refine
// ... other props ...
Dashboard={() => <CustomDashboard />}
/>
);
};

export default App;
import React from 'react';
import { Refine } from '@refinedev/core';
// ... other imports ...
import CustomDashboard from './CustomDashboard';

const App: React.FC = () => {
return (
<Refine
// ... other props ...
Dashboard={() => <CustomDashboard />}
/>
);
};

export default App;
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: ----------------------
kapa.ai
kapa.ai16mo ago
<@1062560314371096576> kapa.ai is still learning and improving, please let us how it did by reacting below
conscious-sapphire
conscious-sapphire16mo ago
@kapa.ai it's not working
kapa.ai
kapa.ai16mo ago
Let me check the knowledge base for you. One moment! :books:
kapa.ai
kapa.ai16mo ago
---------------------- 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.)
kapa.ai
kapa.ai16mo ago
<@1062560314371096576> kapa.ai is still learning and improving, please let us how it did by reacting below
genetic-orange
genetic-orange16mo 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:
{
name: "dashboard",
list: "/",
meta: {
label: "Dashboard",
icon: <DashboardOutlined />,
},
},
{
name: "dashboard",
list: "/",
meta: {
label: "Dashboard",
icon: <DashboardOutlined />,
},
},