Hello beautiful people,
This is my first article here on hashnode, and I plan on writing many more as time goes by, I am a frontend developer (react), I've recently started learning Next.JS for a project, and I want to take you along with my journey, so please follow as we both learn what Next.JS is all about.
Next.JS according to the documentation is a react framework for production. It is created by Vercel. It is a package that uses react to build the user interface, but it has features that allow you to build production-ready applications. unlike react, it has its routing, authentication, styling, etc, and enables server-side rendering.
Next.JS is sort of a combination of a frontend and backend framework. This is not to say that Next.JS can be compared to React or Vue, they are not comparable. It is built on top of React to give you extra features. Now that we know what Next.JS is, we need to know why we need it, or why anyone would want to learn it.
The first feature is Server-side rendering or Pre-rendering. When using just React, the application is rendered on the client-side using javascript. When you open the source code in the browser, you won't see any of your content, like the HTML tags, instead, you'll see the main <div> tag that uses javascript to replace the content, and this is bad for SEO (Search Engine Optimization).
In Next.JS, HTML is generated for each page in advance. This brings about better performance and helps with better SEO for the application because the search engine crawlers can see your HTML tags on page load. The application is rendered on the server-side, hence the name.
Another important feature is the File-based routing that Next.Js has. There is no need to add a third-party router like react-router-dom as we do in the case of React. You simply create a file and make it a react component. Next.JS already has a pages folder that automatically routes each file as a page which can then be viewed on the URL on that browser.
Next.JS also can create API routes. This is utterly amazing because if you think about it, Next.JS is a full-stack framework, because you can create the frontend with react and also write APIs that can be called by the React app.
Lastly, Next.JS allows for easy deployment, because Vercel (the company that owns Next.JS) has its own easy-to-use hosting service. They provide a dev build system. and production build to make life easier for the user. It also supports different authentication patterns.
As I learn more on Next.JS, I'm going to keep you updated, and hopefully, we go over everything that has been discussed with visual examples.