topic
Entries
- tech / 2024
GitHub repo for simple Next.js project ↗
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,…
- tech / 2024
How to consume data from Hygraph using Params – Part 2 ↗
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…
- tech / 2024
How to get data from Hygraph in next.js using params ↗
Yes, it is pretty simple. use this code and update your query.
- tech / 2024
React Series #12: How to consume data from Hygraph and use it in the next.js project ↗
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…
- tech / 2024
React Series #13: How to fix duplicate log entries in console of next.js projects ↗
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.…
- tech / 2024
React Series #10: Understand the folder structure in react next.js project ↗
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…
- tech / 2024
React Series #09: How to create Header 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…
- tech / 2024
React Series #07: How to install shadcn UI in 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…
- tech / 2024
React Series #08: How to create component in react next.js project ↗
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…
- tech / 2024
React Series #00: How to install Node in Mac, Linux, and Windows ↗
Learn how to install node package in your computer. Install Node in Linux Run these commands one after the other to install nodejs in your Linux machine Install node in your Mac Machine: Run these…
- tech / 2024
React Series #01: How to create a new project using Next.js ↗
Next.js is a framework of React. It comes with many features and you can easily extend and create amazing projects using this framework. Here I will show you how to create a new project and what…
- tech / 2024
React Series #02: How to set up react project in VScode ↗
Vscode is one amazing tool that can help you with any development. I have used VScodes for years, I can’t even dream of thinking of any other tool that is close to what they have. In this post, I…
- tech / 2024
React Series #03: How to run a node project & understand the structure ↗
How to run a node project is a simple command. Go to the terminal section in your VSCode and run this command The project by default will run in 3000 port. and you can access your project from…
- tech / 2024
React Series #04: How to change the font in next.js project ↗
Changing the font and color is pretty easy in a next.js project. Open app/layout.js You can change the default Inter to Roboto using this code Update font to Poppins with all options You can use…
- tech / 2024
React Series #05: How to change primary and secondary color in Next.js Tailwind projects ↗
Tailwind has quite a few color options, here is a basic introduction to how Tailwind uses color followed by how to edit the basic color. How to use color in Tailwind Open tailwind.config.js and edit…
- tech / 2024
React Series #06: How to change the default dark theme in next.js project ↗
When you create a new project in next.js it will fire up a default page which will have a dark theme as default. Make these changes to make the light background. open app/global.css To You can adjust…