↑ Node.js is a cross-platform, open-source JavaScript runtime environment.
Node.js runs on the ↑ V8 ↑ JavaScript engine, and executes JavaScript code outside a web browser.
npm, short for Node package manager, is the dependency/package manager you get out of the box when you install Node.js.
npm consists of three distinct components:
- the website
- the CLI
- the registry
The package.json
file contains descriptive and functional metadata about a project, such as a name
, version
, and dependencies
.
The file provides the npm package manager with various information to help identify the project and handle dependencies.
The npm init
command walks you through creating a package.json
file.
The ↑ name
property is a descriptive field that identifies a project. The combination of a project name
and version
forms a unique identifier for a package.
The maximum length of a name is 214 characters. Only lowercase letters are allowed in a name. For published packages, the name must be unique.
The ↑ version
property is a descriptive field that helps identify the package version. A published project requires having a version field in the package.json
file. If working on a personal project, this property is optional.
The ↑ private
property set to true
disallows npm to publish package to registry.
This is a way to prevent accidental publication of private repositories.
The ↑ scripts
property is a dictionary containing script commands that are run at various times in the lifecycle of your package. The key is the lifecycle event, and the value is the command to run at that point.
The ↑ dependencies
property is a simple object that maps a package name to a version range.
The ↑ devDependencies
property specifies those packages in the package.json
file that you need only for project development purposes.
↑ ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code
The ↑ eslint-config-next
package includes everything you need to have an optimal out-of-the-box linting experience in Next.js.
↑ Babel is a JavaScript compiler.
Babel is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.
A ↑ scope is a way of grouping related packages together, and also affect a few things about the way npm treats the package.
↑ React, also known as React.js or ReactJS, is a free and open-source front-end JavaScript library for building user interfaces based on components. It is maintained by Meta and a community of individual developers and companies.
React can be used to develop single-page, mobile, or server-rendered applications with frameworks like Next.js. Because React is only concerned with the user interface and rendering components to the DOM, React applications often rely on libraries for routing and other client-side functionality.
A key advantage of React is that it only rerenders those parts of the page that have changed, avoiding unnecessary rerendering of unchanged DOM elements.
↑ Next.js is an open-source web development framework created by the private company Vercel providing React-based web applications with server-side rendering and static website generation.
The easiest way to get started with Next.js is by using ↑ create-next-app
CLI tool:
npx create-next-app@latest
The ↑ next.config.js
is a configuration file in the root of your project directory that configures Next.js.
next.config.js
is a regular Node.js module. It gets used by the Next.js server and build phases, and it's not included in the browser build.
A ↑ module in Node.js is a simple or complex functionality organized in single or multiple JavaScript files which can be reused throughout the Node.js application.
Each module in Node.js has its own context, so it cannot interfere with other modules or pollute global scope. Also, each module can be placed in a separate .js
file under a separate folder.