Getting Started with NEXT JS
6 min read
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.
• And the basics of React would be a bonus.
• What is Next JS
• Why Next JS
• Features Of Next JS
• Getting Started with Basics Next JS
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 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.
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.
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.
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 👇
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
/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👆
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 🙂.
Did you find this article valuable?
Support Shivam Katare by becoming a sponsor. Any amount is appreciated!