Refine with Nextjs
- Atul
- Programming
- December 13, 2024
Table of Contents
Let’s explore Refine with NextJS
__________________________________________
/ They asked for a robust B2B solution. We \
\ heard 'time to shine with Refine'! /
------------------------------------------
\ ^__^
■-■¬\_______
(__)\ )\/\
||----w |
|| ||
✔ Downloaded remote source successfully.
✔ Choose a project template · refine-nextjs
✔ What would you like to name your project?: · hellonext
✔ Choose your backend service to connect: · data-provider-custom-json-rest
✔ Do you want to use a UI Framework?: · antd
✔ Do you want to add example pages?: · antd-example
✔ Do you need any Authentication logic?: · auth-provider-custom
✔ Choose a package manager: · yarn
Learn More
To learn more about Refine, please check out the Documentation
Came from the readme file inside the project.
This should your page after running the dev server and waiting for like 10-15 seconds.
This is the page after logging in.
Woozeeh!!
The Index Page:
"use client";
import { Suspense } from "react";
import { Authenticated } from "@refinedev/core";
import { NavigateToResource } from "@refinedev/nextjs-router";
export default function IndexPage() {
return (
<Suspense>
<Authenticated key="home-page">
<NavigateToResource />
</Authenticated>
</Suspense>
);
}
When:
- data.authenticated is true, it renders its children.
- data.authenticated is false, it renders fallback prop if provided. Otherwise, it redirects to data- redirectTo page.
- isLoading is true, it renders the loading prop.
More like @Gaurd() decorator in Nestjs
The Layout:
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
const cookieStore = cookies();
const theme = cookieStore.get("theme");
const defaultMode = theme?.value === "dark" ? "dark" : "light";
return (
<html lang="en">
<body>
<Suspense>
<GitHubBanner />
<RefineKbarProvider>
<AntdRegistry>
<ColorModeContextProvider defaultMode={defaultMode}>
<DevtoolsProvider>
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider}
notificationProvider={useNotificationProvider}
authProvider={authProvider}
resources={[
{
name: "blog_posts",
list: "/blog-posts",
create: "/blog-posts/create",
edit: "/blog-posts/edit/:id",
show: "/blog-posts/show/:id",
meta: {
canDelete: true,
},
},
{
name: "categories",
list: "/categories",
create: "/categories/create",
edit: "/categories/edit/:id",
show: "/categories/show/:id",
meta: {
canDelete: true,
},
},
]}
options={{
syncWithLocation: true,
warnWhenUnsavedChanges: true,
useNewQueryKeys: true,
projectId: "H2isEz-BL8c5o-muA9VX",
}}
>
{children}
<RefineKbar />
</Refine>
</DevtoolsProvider>
</ColorModeContextProvider>
</AntdRegistry>
</RefineKbarProvider>
</Suspense>
</body>
</html>
);
}
Okay so the data is coming from resources added here.
The blog-posts
Somehow the data is being set to tableProps. This seems mysterious.
resources=
{[
{
name: "blog_posts",
list: "/blog-posts",
create: "/blog-posts/create",
edit: "/blog-posts/edit/:id",
show: "/blog-posts/show/:id",
meta: {
canDelete: true,
},
},
{
name: "categories",
list: "/categories",
create: "/categories/create",
edit: "/categories/edit/:id",
show: "/categories/show/:id",
meta: {
canDelete: true,
},
},
]}
The resources props defined in
{
name: "blog_posts",
list: "/blog-posts",
create: "/blog-posts/create",
edit: "/blog-posts/edit/:id",
show: "/blog-posts/show/:id",
meta: {
canDelete: true,
},
},
Here: list: "/blog-posts"
There is a directory /src/app/blog-posts
From that resources props
the page.tsx inside /blog-posts consumes the data from https://api.fake-rest.refine.dev/blog_posts resource and shows it in the table.
I guess now the mystry is little bit clear.
Okay so routerProvider from Refine for Nextjs does this thing.
Tring different configuration:
___________________________________
/ CRUD apps so sleek, even the cows \
| want in! Let's get mooo-ving with |
\ Refine! /
-----------------------------------
\ ^__^
■-■¬\_______
(__)\ )\/\
||----w |
|| ||
✔ Downloaded remote source successfully.
✔ Choose a project template · refine-nextjs
✔ What would you like to name your project?: · hellonext2
✔ Choose your backend service to connect: · data-provider-custom-json-rest
✔ Do you want to use a UI Framework?: · tailwindcss
✔ Do you want to add example pages?: · headless-example
✔ Do you need any Authentication logic?: · none
✔ Choose a package manager: · yarn
Tailwind is not added correctly, will see it later.
Refine devtools
yarn refine devtools init
Then start your server again
✓ Refine Devtools is running at port 5001
▲ Next.js 14.2.20
- Local: http://localhost:3000
- http://localhost:3000 for application
- http://localhost:5001 for webtools
Devtools requies to sign in with Github, let’s do it then.
After logging in the dashboard is pretty much BETA!
Package overview:
This section shows the packages installed in the project and their versions.
You can add more packages directly from here only.
Monitoring for function and hooks calls.