Learning new thing is always been fun and interesting, but we all have to make sure that we learn in a structured way. I started learning Next JS last year but, I couldn't be able to understand it because I didn't learn it in a structured way. Now, I started it again from scratch and this time, I want to share all my learnings with all of you. In today's blog, I am going to share the basics of Next JS and all of the things that I have learned today in Next JS. So, without wasting a bit, let's get started.
Prerequisites
• Html
• CSS
• JavaScript
• And the basics of React would be a bonus.
We'll cover...
• What is Next JS
• Why Next JS
• Features Of Next JS
• Getting Started with Basics Next JS
Introduction
Next.js is a popular JavaScript framework for building server-rendered, statically generated, and client-side applications. It's built on top of React and provides a simple and easy-to-use interface for building web applications. In this blog, we'll go over the basics of Next.js and how it can be used to build powerful and performant web applications.
What is Next JS and its Features?
Next.js is a framework that allows you to build server-rendered and statically-generated applications using React. It provides a set of tools and APIs that make it easy to build and deploy React-based applications. Some of the key features of Next.js include:
• Automatic code splitting: Next JS automatically separates your code into smaller chunks, making it easy to supply only the code, that the client requires. This helps to improve the performance of your application by reducing the amount of code that needs to be downloaded by the browser.
• Server-side rendering: Next.js allows you to render your React components on the server, which can improve the performance of your application by reducing the amount of work that the client needs to do.
• Static exporting: Next.js allows you to build statically-generated websites, which means that the HTML for your site is generated at build time and can be served directly from a CDN. This can improve the performance and scalability of your site.
So, here are two terms that we all need to understand Server Side Rendering(SSR) and Client Side Rendering(CSR).
SSR and CSR [ React VS Next ]
• SSR stands for Server-Side Rendering. In the context of Next.js, it refers to the ability to render a React application on the server rather than in the client's browser.
Next.js includes built-in support for server-side rendering, which can have several benefits:
Improved performance: Server-side rendering can improve the initial load time of your application, since the server can send the fully-rendered HTML to the client, rather than waiting for the client to render the JavaScript.
Better SEO: Some search engines have difficulty indexing JavaScript-heavy applications, so server-side rendering can make it easier for your application to be indexed and ranked.
Improved accessibility: Server-side rendering can improve the accessibility of your application since the server can generate the HTML in a way that is more accessible to screen readers and other assistive technologies.
To use server-side rendering in a Next.js application, you need to write your React components as you would, and Next.js will handle the server-side rendering for you.
• CSR stands for Client-Side Rendering. In the context of React, it refers to the process of rendering a React application in the client's browser, rather than on the server.
React is a client-side JavaScript library. It performs client-side rendering by default. This means that the React code is loaded and executed by the client's browser, and the React components are rendered to the DOM (Document Object Model) in the client's browser.
One advantage of client-side rendering is that it allows for a more interactive and responsive user experience since the client's browser can respond to user input and update the UI without needing to reload the page.
However, client-side rendering can also have some drawbacks. For example, it can be slower than server-side rendering. Since the client's browser needs to download and execute the JavaScript code before it can render the components. It can also be less SEO-friendly since some search engines have difficulty indexing JavaScript-heavy applications.
Overall, whether to use client-side rendering or server-side rendering (or a combination of both) will depend on the specific requirements of your application.
Getting Started with Next JS
To get started with Next.js, you'll need to have Node.js and npm (the Node.js package manager) installed on your machine. Once you have these tools installed, you can create a new Next.js project by running the following command:
npm init next-app
Before that, you can visit the official site of Next JS. Here you can go through their official docs, and view the projects, templates, and blogs.
.png?type=webp)
.png?type=webp)
Let's continue, That command will create a new Next.js project in a directory with the same name as your project. Your project will look like this 👇
.png?type=webp)
Here you can see many folders in this directory. Here is a short description of these folders and files.
/node_modules: This folder contains the npm packages that are required by your Next.js project. These packages are installed when you run the npm install command.
/pages: This folder contains the individual pages of your Next.js application. Each file in this folder represents a route in your application. For example, a file named about.js will be available at the /about route.
/public: This folder contains static assets such as images, fonts, and other files that should be available to the client-side JavaScript code.
/src: This folder contains the source code for your Next.js application, including custom components and utility functions.
.gitignore: This file contains a list of file patterns that Git should ignore.
package.json: This file contains metadata about your Next.js project, including the dependencies that are required by your application.
next.config.js: This file is a configuration file for Next.js. You can use it to specify custom settings for your application, such as the base URL or the target environment.
Now you can start the development server by running the following command:
npm run dev
And your output will look like this👆
Wrapping Up
These are all the things that I have learned today in Next JS, and I'll continue this learning in the next blog. I'll cover more about Next JS and develop a project to help you understand it better. I hope you learn something from this blog. If you learned something, don't forget to share this blog with your friends and community members.
You can also join me on my socials...
Thanks for reading 🙂.