Nextjs

How to install Next.js globally help of create-next-app?

I will tell you how to install nextjs globally on your machine. This article is part of my next.js #SeriesPart6

There are three ways to install nextjs on my laptop or pc. In the post, I show you three ways to install next.js. But my main focus is to install nextjs globally on your PC and laptop.

First ways

It is a widespread way to install next.js on your PC. everyone uses this method to install nextjs. You paste one commanding your terminal. This command automatically sets up your nextjs project with all configurations.

In this method, you use the create-next-app method to install next.js on your PC and laptop.

npx create-next-app@latest
# or
yarn create next-app

Config typescript in nextjs with — typescript flag

npx create-next-app@latest --typescript
# or
yarn create next-app --typescript

Second ways

The second method is not a very common way to install next.js. in this method, you install nextjs, react and react-dom separately in your project. If you are interested in setting up all config manually in your project time, I recommend using this method.

npm install next react react-dom
# or
yarn add next react react-dom

After installation, you add or paste scripts in your package.json file.

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

Third ways(Global ways)

In this third method, you install create-next-app global use of npm and yarn with a global flag. After installing your next.js app, set up your nextjs app Environment using create-next-app.

Steps

1. Install create-next-app globally
2. Create next.js app
3. Templates

Install create-next-app globally

In this step, you install create-next-app globally on your laptop and PC. For installation, you use npm and yarn. Npm and yarn are both major javascript package managers currently. You use yarn, and npm to install next.js with the following command-

npm install --global @create-next-app
# or
yarn global add @create-next-app

After installation is complete, you can create the next.js app project locally.

Create next.js app

Now you run the create-next-app command to create a nextjs app locally on your PC. you open any place to run this command to create the next.js app with automatically create all set up like the npx command. You do not need any configuration. You start coding like the first method.

create-next-app my-app 

Templates

Templates are additional functionality provided by the create-next-app command. You use the template flag to set up and install different templates in your project.

They are four templates provided by create-next-app.

First is the default template-

create-next-app my-app --template default

This command sets up your default project like the first method.

The second template help set up all bootstrap configuration automatically in your nextjs app. you do not need any other configuration for bootstrap.

create-next-app my-app --template bootstrap

The third template help to set up semantic UI configuration automatically in your nextjs app. you do not need any other configuration for semantic UI.

create-next-app my-app --template semantic

The fourth template is not a template. It is just a typescript flag like the first method. You automatically add the typescript flag in the create-next-app command to set up typescript with the global app.

create-next-app my-app --typescript

Note: I do not test this command. I hope it works for you.

Resource

https://semantic-ui.com/introduction/getting-started.html

https://getbootstrap.com/docs/5.0/getting-started/introduction/