wise-white•15mo ago

looking for nextjs landingpage + non-public area sample

Hello everyone! 👋 I'm currently working on a project and was wondering if anyone has or knows of some sample code that fits the following requirements: I'm trying to build a website using Next.js and Refine.dev. The website needs to have both public and private sections. For the public part, I'm planning to have a landing page and a FAQ page. As for the non-public area, this will be accessible only for logged-in users and should contain a dashboard and some other crud resources. I also want to use refine.dev themed Layout for both areas. If anyone has a sample or a template that I could use as a starting point, I would greatly appreciate it! Thank you in advance for your help. 😊

5 Replies

kapa.ai•15mo ago

Hi @mobileappvault. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hello! 👋 Based on the information extracts provided, I can give you some guidance on how to set up your Next.js project with Refine.dev for both public and private sections. First, you'll need to set up your _app.tsx file to use Refine.dev with Next.js. Here's an example of how to do that:

import React from "react";
import { AppProps } from "next/app";
import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/nextjs-router";
import dataProvider from "@refinedev/simple-rest";

const API_URL = "https://api.fake-rest.refine.dev";

function MyApp({ Component, pageProps }: AppProps): JSX.Element {
  return (
    <Refine
      routerProvider={routerProvider}
      dataProvider={dataProvider(API_URL)}
    >
      <Component {...pageProps} />
    </Refine>
  );
}

export default MyApp;

import React from "react";
import { AppProps } from "next/app";
import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/nextjs-router";
import dataProvider from "@refinedev/simple-rest";

const API_URL = "https://api.fake-rest.refine.dev";

function MyApp({ Component, pageProps }: AppProps): JSX.Element {
  return (
    <Refine
      routerProvider={routerProvider}
      dataProvider={dataProvider(API_URL)}
    >
      <Component {...pageProps} />
    </Refine>
  );
}

export default MyApp;

(Source: https://refine.dev/blog/create-full-stack-app-with-refine (https://refine.dev/blog/create-full-stack-app-with-refine)) For the public part of your website, you can create separate pages for the landing page and FAQ page in the pages folder of your Next.js project. These pages will be accessible to all users. For the private section, you can use the Authenticated component provided by Refine.dev to restrict access to logged-in users. Here's an example of how to use it:

import { Authenticated } from "@refinedev/core";
import { AuthPage } from "pages/auth";
<Route
  element={
    <Authenticated fallback={<Outlet />}></Authenticated>
  }
>
  <Route
    path="/login"
    element={
      <AuthPage
        type="login"
        formProps={{
          initialValues: {
            email: "demo@refine.dev",
            password: "demodemo",
          },
        }}
      />
    }
  />
</Route>

import { Authenticated } from "@refinedev/core";
import { AuthPage } from "pages/auth";
<Route
  element={
    <Authenticated fallback={<Outlet />}></Authenticated>
  }
>
  <Route
    path="/login"
    element={
      <AuthPage
        type="login"
        formProps={{
          initialValues: {
            email: "demo@refine.dev",
            password: "demodemo",
          },
        }}
      />
    }
  />
</Route>

(Source: https://refine.dev/blog/building-react-admin-dashboard (https://refine.dev/blog/building-react-admin-dashboard)) For the layout, you can create a custom layout component and pass it to the Layout prop of the Refine component. Here's an example of a simple layout component:

import { LayoutProps } from "@refinedev/core";
import { Box, Container, Flex, Image } from "@chakra-ui/react";

export const Layout: React.FC<LayoutProps> = ({ children }) => {
  return (
    <Box
      display={"flex"}
      flexDirection={"column"}
      backgroundColor={"#eeeeee"}
      minH={"100vh"}
    >
      <Container maxW={"container.lg"}>
        <Flex justify={"space-between"} mt={4} alignSelf={"center"}>
          <a href="https://refine.dev">
            <Image alt="Refine Logo" src={"./refine_logo.png"} />
          </a>
        </Flex>
        {children}
      </Container>
    </Box>
  );
};

import { LayoutProps } from "@refinedev/core";
import { Box, Container, Flex, Image } from "@chakra-ui/react";

export const Layout: React.FC<LayoutProps> = ({ children }) => {
  return (
    <Box
      display={"flex"}
      flexDirection={"column"}
      backgroundColor={"#eeeeee"}
      minH={"100vh"}
    >
      <Container maxW={"container.lg"}>
        <Flex justify={"space-between"} mt={4} alignSelf={"center"}>
          <a href="https://refine.dev">
            <Image alt="Refine Logo" src={"./refine_logo.png"} />
          </a>
        </Flex>
        {children}
      </Container>
    </Box>
  );
};

(Source: https://refine.dev/blog/handcrafted-nextjs-e-commerce-app-tutorial-strapi-chakra-ui (https://refine.dev/blog/handcrafted-nextjs-e-commerce-app-tutorial-strapi-chakra-ui)) You can modify this layout component to fit your needs and use it for both public and private sections of your website. I hope this helps you get started with your project! 😊 ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•15mo ago

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

wise-white•15mo ago

Bot answer didn‘t helped me with my problem.😑

frail-apricot•15mo ago

Hey @mobileappvault This sample application may be a good start for you. https://refine.dev/docs/examples/next-js/

Next.js | refine

refine allows you to build your SSR supported web applications using Next.js. With this example, you can see how to make a simple SSR supported CMS Admin panel.

wise-white•15mo ago

Yea I already used that. I just asked because i thought,.. maybe someone already tried to implement the same requirements and I can save my time to do it by my own. 🙈