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 -
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.
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.