sensitive-blue•2y 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;

6 Replies

like-gold•2y ago

Can you check out this doc https://refine.dev/docs/advanced-tutorials/ssr/nextjs/

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.

like-gold•2y ago

without any resource passed to the resources prop of the Refine component, it will show this welcome screen

sensitive-blue•2y ago

how to pass it ? can you help ?

like-gold•2y 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

sensitive-blue•2y ago

currently I only have Layout in my app and I want to display it, what resource should I add ?

like-gold•2y 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)