like-gold
like-gold17mo ago

My components not showing

I have made some components but they are not visible on home page. The only output I am seeing is(image attached). I want my component to be rendered.
import React from "react";
import { AppProps } from "next/app";
import Head from "next/head";
import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-nextjs-router";
import { DataProvider } from "@pankod/refine-strapi-v4";

import { ChakraProvider } from "@chakra-ui/react";
import { Layout } from "./components/Layout";

const API_URL = "https://api.strapi-multi-tenant.refine.dev/api";

function MyApp({ Component, pageProps }: AppProps): JSX.Element {
const dataProvider = DataProvider(API_URL);

return (
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider}
Layout={Layout}
>
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
</Refine>
);
}

export default MyApp;
import React from "react";
import { AppProps } from "next/app";
import Head from "next/head";
import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-nextjs-router";
import { DataProvider } from "@pankod/refine-strapi-v4";

import { ChakraProvider } from "@chakra-ui/react";
import { Layout } from "./components/Layout";

const API_URL = "https://api.strapi-multi-tenant.refine.dev/api";

function MyApp({ Component, pageProps }: AppProps): JSX.Element {
const dataProvider = DataProvider(API_URL);

return (
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider}
Layout={Layout}
>
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
</Refine>
);
}

export default MyApp;
No description
6 Replies
ratty-blush
ratty-blush17mo ago
Next.js | refine
refine can be used with Next.js to SSR your pages. It doesn't get in the way and follows Next.js conventions and also provides helper modules when necessary.
ratty-blush
ratty-blush17mo ago
without any resource passed to the resources prop of the Refine component, it will show this welcome screen
like-gold
like-gold17mo ago
how to pass it ? can you help ?
ratty-blush
ratty-blush17mo ago
Also, its better to wrap ChakraProvider to Refine component than to Refine to ChakraProvider Check out the code sample in the usage section of the above doc
like-gold
like-gold17mo ago
currently I only have Layout in my app and I want to display it, what resource should I add ?
ratty-blush
ratty-blush17mo ago
Here's a more detailed explanation about resources: https://refine.dev/docs/api-reference/core/components/refine-config/#resources Resources is the main block of refine and they are used to send requests to API also they are used in routing. So when you pass a resource { name: "posts" } the actions the resource has will be served in /posts resource if a custom one is not provided in options. Like if you define;
<Refine
{/* ... */}
resources={[
{
name: "posts",
list: () => <div>my posts list page</div>,
show: () => <div>my posts show page</div>,
create: () => <div>my posts create page</div>,
edit: () => <div>my posts edit page</div>
}
]}
/>
<Refine
{/* ... */}
resources={[
{
name: "posts",
list: () => <div>my posts list page</div>,
show: () => <div>my posts show page</div>,
create: () => <div>my posts create page</div>,
edit: () => <div>my posts edit page</div>
}
]}
/>
/posts route will show my posts list page /posts/123 route will show my posts show page /posts/create route will show my posts create page /posts/edit/123 route will show my posts edit page Of course, to render those in Next.js apps, you need to define a [[...refine]].tsx page (explained in the document I shared above at my first message)