Next.js installation
getting ourselves ready quickly with Next.js web development
// updated 2025-05-20 14:09
Next.js installation should not take too long with node and npm installed:
Setup and download
In Terminal (or some command line prompt), let's start by creating a folder:
mkdir mynextjs && cd mynextjsIn the project folder, let us initialize the project:
npm init -yThen, we will install the required packages:
npm install --save-dev node typescript @types/react @types/node react react-dom nextThe following things should appear in the project folder:
- package.json = a project configuration and list of dependencies (third-party scripts)
- node_modules = a folder with all the dependencies
Project folder structure
The folder and file structure should look something like this:
- /mynextjs
- /app
- layout.jsx (or layout.tsx if using TypeScript)
- /public
- .gitignore
- node_modules
- package.json
- package-lock.json
- /app
The .gitignore file
The .gitignore file should look like this:
node_modules
.envThis file prevents the project from becoming too large because of the third-party scripts!
The app/layout.jsx (or .tsx) file
The base layout file, app/layout.jsx, should look like this:
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}That should provide us with a minimal front-end foundation:
- we can then create our first page
- run that page from a local server on a browser
- deploy it to the cloud with a URL that anyone on the internet can access!