I have been learning Next.js and here is my repo and a small demo of what I have done so far. GitHub Repo: https://github.com/ramchandev/anartby2 Quick Demo of these features: Pages: Home Page, Categorey Page, Product Detail PageComponents: Header, Hero, Category… Read More »GitHub repo for simple Next.js project
You can get data from Hygraph using useEffect and useState. You can follow these steps: Create a file inside your app folder: app > (routes) > products > _components > CatDetails.jsx Include Section Now add your Query in _services >… Read More »How to consume data from Hygraph using Params – Part 2
Yes, it is pretty simple. use this code and update your query.
By default in next.js the log will come twice, let’s see how to fix it. Got to next.config.mjs add this code If you don’t have any other setting then you can skip the (,) if not then add a comma.… Read More »React Series #13: How to fix duplicate log entries in console of next.js projects
All this time we have been doing internal content. But here is how we can fetch data from Hygraph to show it on the website. Step 1: After login to the Hypragh go to your project and in your project… Read More »React Series #12: How to consume data from Hygraph and use it in the next.js project
For navigation here is a layout that is adopted from the tailwind header layout. In this example, the data set is present inside the file. To make this navigation and sub nav, please install these these components Here is the… Read More »React Series #11: Create navigation, sub-menu and loop from the internal dataset
It is essential to understand the folder structure to master the linking. So you can easily create navigations. Using this you can create static links and dynamic route How to create a static page Create a folder inside the app… Read More »React Series #10: Understand the folder structure in react next.js project
Create header components as I explained in this post. Let’s have 3 main elements in the header, Logo (Image), Links (Navigation), and Button. Install Navigation Menu from Shadcn/UI Install Button Import Section Main function code Header Preview
Step1 : Create a folder “_components” inside the app folder Step 2: Create a file called Header.jsx and use the redux autocomplete “rfce”. See the below video Step 3: Update the content part in Header.jsx Step 4: Open your layout.jsx… Read More »React Series #08: How to create component in react next.js project
You have tailwind css in your project, but you can also add different UI layers. If you get an Android phone, each brand comes with a different OS. Likewise, you can install any UI in your react projects. Here are… Read More »React Series #07: How to install shadcn UI in next.js project