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•16mo 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•16mo ago

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

xenial-black•16mo ago

@kapa.ai it's not working

kapa.ai•16mo ago

Let me check the knowledge base for you. One moment! :books:

kapa.ai•16mo 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.)

1. Build your first refine app | refine

About this Tutorial

kapa.ai•16mo ago

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

conscious-sapphire•16mo 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 />,
  },
},