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
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:
(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:
(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:
(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:
----------------------<@796126066460459049> kapa.ai is still learning and improving, please let us how it did by reacting below
rival-black•16mo ago
Bot answer didn‘t helped me with my problem.😑
reduced-jade•16mo 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.
rival-black•16mo 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. 🙈