Convert your Reactjs code into Nextjs
Nextjs is a Reactjs framework It allows a lot of amazing features i.e. Fast rendering, Search Engine Optimization, server-side rendering, Routing, full-stack code, better styling, and many more features are there. If you are a beginner in Nextjs and wanted to convert your Reactjs code into Nextjs So this blog will definitely help you.
Hi,
My name is Afroz Quraishi. I’m a pre-final year student in the department of Information Technology @IIIT Gwalior. Currently, I am working in a startup as a Frontend Developer, Next.js and I have been working with Reactjs and related libraries/frameworks since 2020.
1. CSS
Reactjs: Create a CSS file using any name like style.css, about-style.css, etc. To avoid importing everywhere import its _app.jsfile only. It will apply automatically in each file.
Nextjs: There are two types.
A. styles.css: Can be applied in all the files (pages and any Components) global in Nature.
B. styles.module.css: Create an automatic unique className so that you can use it via import in any component with the same className. Local in Nature.
2. className
A. Single className
React: className=”about-container”
Next: className={styles.about_container}
B. Multiple className
Reactjs: className=”about-container parent”
Nextjs: className={`${styles.about_container} ${styles.parent`}
3. Image
Reactjs: <img src={file directory name}/>
Nextjs: Nextjs has a inbuild Image tag it automatic reduce image file size so that website will take lesser time on loading.
import Image from “next/image”;
<Image
src={profilepic}
alt=”profilepic”
width={180}
height={180}
/>
4. Routing
Reactjs: We need to install an external npm package like react-router-dom in order for to router to route one page to another page dynamic routing is a little bit difficult in that case.
Nextjs: Nextjs provides a powerful routing system In each file in the pages section behaves like a router. It has 404.js file for the undefined router. index.js for home page if it is in page directory or if index.js is defined in a folder then whatever the folder name is will behave like that endpoint and [id].js the file will help in dynamic routing.
My suggestion: Learn Nextjs It has a lot of features. Once you learn you never come back to the Reactjs.
Find this blog helpful ? “clap”: “clap :)”
Thanks for reading!
keep following and keep sharing (:>)
Want to connect? Reach out to me on LinkedIn