Next.js Installation
You must have Node.js installed before installing Next.js.
Make sure you’re using the most recent version of Node. Compare it to the latest LTS version provided on https://nodejs.org/ by running node -v in your terminal.
node -v
The npm command will be available in your command line when you install Node.js.
Creating A Next.js App
Getting the requirements above out of the way, creating a Next.js can be done in two ways, the first being the simplest:
- With create-next-app, or
- Manually
Creating A Next.Js App With create-next-app
Using create-next-app is simple and straightforward, plus you can also get going with a starter template.
Open up the directory you’d like to create your project in and run:
npx create-next-app my-app
After the installation is complete, you can navigate to your new project directory:
cd my-app
Once there, start your development server:
npm run dev
And once the server is ready, you can open up http://localhost:3000 in your browser where you can now see your new Next.js app!
Manually create a Next.js app
Follow these procedures to manually develop the structure app:
Make a directory with your application’s name in it. Write the following in the console:
mkdir next-js-app
To go in the directory write the following in the console:
cd next-js-app
Now we have to edit the file Package.Json, and add in the scripts section, the next lines.
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
Now, we need a page directory:
In the root directory, create a directory named pages. Example:
mkdir pages
Enjoy, now you can run the app. for example in dev mode.
npm run dev
This will make the app available on port 3000, on localhost.
Open http://localhost:3000 in your browser to see it.