How I learned NextJs in 2 days

I had recently migrated one of my projects, an open-source called Tech Roadmap from pure HTML, CSS, and JavaScript to React and was trying to make it SEO friendly for Google and other website crawlers. So I decided to use Helmet to give all the pages unique metatags and React Snapshot to prerender the pages.

The only problem was that React snapshot and its alternative React Snap were not compatible with React v18, the current version I was on which was a bummer. To fix the problem, I had to either downgrade the version to 17 or below or forget about SEO which I wasn't very happy about. Guess what I did? I learned NextJs instead.

I learned how to use NextJs in 2 days with the help of Codevolution's NextJs playlist on Youtube (which is an awesome course by the way) and used the 3rd day to migrate the web app, all 7 pages to NextJs.

It was quite an exciting experience for me as I found NextJs quite easy to use given my React background and that NextJs is a framework for React.

I thought I was in love with React before, but now I'm even more in love with it because of Next.js, and moving forward I will try to use NextJs as much as I can.

By the way, Next.js is a React framework that makes working with React easier and faster because of the unique features it comes with like

• automatically defining your routes for you,
• prerendering your pages by default which is good for SEO,
• there is no need for 3rd party packages to inject metatags into your different pages as it has its inbuilt package for that,
• using CSS modules that allow you to scope CSS styles to a particular component so you don't have to worry about your style rules clashing and many other nicest feature.

If you are already familiar with React, I urge you to try using Next.js. It would make coding so much easier and also make the online presence, SEO-wise, faster and better for whatever web app you are building. I will write more about NextJs later but for now, enjoy my mini-article/note.

Discover your path in tech with Tech Career Roadmap! Free ebooks, courses, articles, & tools. From coding to no-code, start or switch careers effortlessly.