How to install Next.js globally help of create-next-app?
I will tell you how to install nextjs globally in 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.
It 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 for 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.
yarn create next-app
Config typescript in nextjs with — typescript flag
npx create-next-app@latest --typescript
yarn create next-app --typescript
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
yarn add next react react-dom
After installation, you add or paste scripts in your package.json file.
"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 global flag. After installing your next.js app, set up your nextjs app Environment using create-next-app.
- Install create-next-app globally
- Create next.js app
Install create-next-app globally
npm install --global @create-next-app
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.
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.