Next.js | Environment Setup

Hello folks! welcome back to a new section of our tutorial on Next.js. In this section of our tutorial on Next.js, we will be discussing about Next.js Environment Setup.

As Next.js is a React Based framework, we are making use of Node environment. Now make sure that you have Node.js and npm installed on your system. You can use the following command to install Next.js -

npm install next react react-dom

You can observe the following output once Next.js is installed successfully -

+ react@16.13.1
+ react-dom@16.13.1
+ next@9.4.4
added 831 packages from 323 contributors and audited 834 packages in 172.989s

Now, let us create a Node package.json -

npm init

Select the default values while creating a package.json -

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (nextjs)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to \Node\nextjs\package.json:
{
   "name": "nextjs",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "dependencies": {
      "next": "^9.4.4",
      "react": "^16.13.1",
      "react-dom": "^16.13.1"
   },
   "devDependencies": {},
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC"
}
Is this OK? (yes)

Update the scripts section of package.json to include Next.js commands -

{
   "name": "nextjs",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "dependencies": {
      "next": "^9.4.4",
      "react": "^16.13.1",
      "react-dom": "^16.13.1"
   },
   "devDependencies": {},
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "dev": "next",
      "build": "next build",
      "start": "next start"
   },
   "author": "",
   "license": "ISC"
}

Create Pages Directory

Create pages folder within nextjs folder and then create an index.js file with the content below -

function HomePage() {
   return <div>Welcome to Next.js!</div>
}

export default HomePage

Start Next.js Server

Now run the following command to begin the server -

npm run dev
> nextjs@1.0.0 dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Output

Open localhost:3000 in any browser of your choice and you see the following result -

READ: Next.js | Overview

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we are going to be studying about Next.js Pages.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.