In this Blog, we will be discussing what and why of Next.Js along with the creation of a Next.Js app. We will also be learning the usage of different files and folders that create-next-app provides us at the time of app creation. So, stick to this blog to gain a conceptual understanding of Next.Js.
What is Next js?
According to the Documentation, Next Js is the React Framework for Production.
Now let’s break down these terms to understand them better.
React Framework Ready for Production
React
If you try to build an application just only with React it is not quite possible to develop a full feature-rich application ready to be deployed for production. React is a JavaScript library used to build User Interfaces and it is only responsible for the view Layer of an application, you as a developer have to make decisions on the other features of the app like authentication, routing, styling, etc.
Next
Whereas Next is a React Framework, a package that uses React to build User Interfaces. But Next also comes loaded with a lot more features that enable you to develop a full feature-rich application that is production ready.
Features like routing, authentication, styling, bundle optimization, etc. So, you need not worry about additional package installation. Next has everything for your requirement.
Why Next.Js?
Next js simplifies the process of developing a React application production ready.
Let’s see some of the important and note-worthy features that next js provides us out of the box.
1. File-based routing: In React you have to install a third-party package for routing, configure it and add code each time when you create a route. Next js provides file-based routing that makes the whole routing process easy to handle.
2. Pre-rendering: Next js generates the HTML of each page in advance instead of having it all done by client-side javascript. Pre-rendering results in better performance and SEO (Search Engine Optimization) which is something we wall want.
3. API routes: In Next js, you can create API routes. You can create the front end in React and create APIs that can be called by the react application.
4. Support for CSS Modules: Next js supports CSS modules that saves the time of choosing a CSS library. However, you can use CSS frameworks like Tailwind or CSS in Js Library like styled-components.
5. Authentication: Next js Supports Multiple authentication patterns each designed for different use cases.
6. Dev and Prod build system: Next js provides a Dev build system and a well-optimized production build system that helps you focus more on code and less on the configurations.
Creating a Next.Js App
For creating a Next.js app you must have Node.js and npm (or npx) installed on your system.
To check if it is installed write the command :
node -v : for Node.js
npm -v: for npm
npx -v: for npx
To create a Next.js App any of the two given ways can be followed:
1. By Installing the required packages and scripts Manually
2. Or by create-next-app
By Installing the required packages and scripts Manually
For creating the Next.Js app you require three packages: next, react, and react-dom.
To install these three packages write the below command in your terminal :
npm install next react react-dom
After installing the packages paste the following scripts into your package.json file
"scripts": {
"dev": "next dev",
"start": "next start",
"build": "next build"
}dev: to Open the Next.Js app in development mode
start: Open the Next.Js app in production mode
build: to create Next.Js app production build
By create-next-app
It is the simplest way to create a Next.js app, just use the create-next-app tool and it will do all the heavy lifting for you from installing packages, and dependencies to creating the required folder structure and boilerplate code.
To create the app use the following command with the app name:
npm create-next-app <app-name-here>
or
npx create-next-app <app-name-here>
Starting the development server
After creating the next.js app use the command
npm run dev
to start the development server. Hit http://localhost:3000 to see your first next.js app running on the browser.
Directory Structure
Now let’s discuss the directory structure provided by the create-next-app tool.
Files
- Package.json: This file contains the 3 dependencies next, react and react-dom, 2 Dev dependencies (eslint and eslint-config-next), and scripts required for the development and running of the next app.
- Package-lock.json/yarn.lock – This file is created depending upon the package manager you prefer whether npm or yarn. It simply ensures consistent installation of your dependencies.
- Next.config.js – It is the configuration file of next.js having react strict mode enabled for development.
- Eslintrc – it is the configuration file for eslint.
Folders
- .next – It is generated when we run either dev or build scripts. From this folder, the next.js app is served.
- Node-modules – It is the folder in which all the dependencies and sub-dependencies are installed. It is created when we run npm or yarn install or at the time of running the development server.
- Styles – it contains some styles of our application having global as well as component-specific styles.
- Public – this folder holds all the public resources for our application having favicon, SVG, images, etc. It is different from the public folder that we have for react application as it doesn’t contain the single and only HTML file that we have in react application.
- Pages – It is the most important folder of our next.js app as it is alone responsible for all the routing in our application. Index.js file is served when we visit https://localhost:3000 in our browser and app.js is the file where we define the layout of our application. The API folder is where we can create API for our application.
Conclusion
So in this blog, we learned what exactly is next.js and why it is worth using. Also, we looked at how we can create our next.js app with the important directory structure that we should know while developing.
To learn more about Next.Js follow the link – NextJs
To learn React you can follow the link where you will find a variety of blogs on React – Knoldus Blogs
and can also follow the documentation – React Documentation
For more updates on such topics, please follow our LinkedIn page – FrontEnd Studio
