next.js-tutorial

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.

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published. Required fields are marked *