In this tutorial, we will install Next.js latest version.
Next.js is based on React framework for the web application. It is used by some of the world's largest companies. We can create full-stack web application by extending the latest React feature. It has build-in image, font, and script optimization. It has powerful features like client and server side rendering and caching options, including incremental static regeneration on a per-page level and many more features.
Let's get started with the installation process.
Next.js 14 Installation latest Version
Automatic Installation
It is recommended to install a new Next.js application using create-next-app. It will help us to sets up everything. Execute following command:
npx create-next-app@latest
You will get following prompts:
Need to install the following packages:
create-next-app@14.0.4
Ok to proceed? (y) y
✔ What is your project named? … my-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Select the options as per your project requirements.
We can add options with the command like:
npx create-next-app@latest my-app --ts --tailwind --eslint --app --src-dir --import-alias @
Options:
- my-app: It is the application name. Set it as per your choice
- --ts: For typescript, use can use --js for javascript
- --tailwind: To enable Tailwind css
- --eslint: For ESLite
- --app: It is to use app router which is highly recommended
- --src-dir: To use src directory. App directory will be in src directory. If you don't want it remove it from the command and it will prompt to ask it.
- --import-alias @: It is to set default import alias
For more options, execute help command:
npx create-next-app@latest --help
Manual Installation
Let's see how we can install and create new Next.js application. We are using app router to create a new application which is recommended.
First, we need to install Next, React, React DOM, and Typescript manually using following command:
npm install next@latest react@latest react-dom@latest typescript
Note: typescript is an optional, if you want to use javascript, replace typescript with javascript
Next, open package.json file and add following scripts before the dependencies:
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
Above script will help us with the deployment functionality like:
- dev: runs next dev to start Next.js in development mode.
- build: runs next build to build the application for production usage.
- start: runs next start to start a Next.js production server.
- lint: runs next lint to set up Next.js' built-in ESLint configuration
Next, create a app/ folder. Next.js uses file-system routing. The routes of the application determined by the file structure. Like if we create about directory, the URL path will be http://localhost:3000/about. The app router allows us to use React's latest features.
Once, we create app/ folder, create a new file called layout.tsx and page.tsx. If you are using javascript replace tsx with js. These will be rendered when the user visits the root of your application (/).
Open app/layout.tsx and add following code:
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
This layout.tsx file is root layout. The code is gets applied to all the pages (app/ folder) in the application.
Finally, to create a home page, open app/page.tsx and add following initial code:
export default function Page() {
return <h1>Hello, Next.js!</h1>
}
This is the index or home page of the web application.
We have successfully installed and created new Next.js app. Next run the development server.
Run the Development Server
To run the development server, execute following command:
npm run dev
Navigate to your browser and visit http://localhost:3000 to view our application.
To build the application for production, execute following command:
npm build
That's it, we've seen the Next.js 14 Installation. We have completed all the necessary initial step to create the Next.js web application. For more details you can visit official document website. Also, we have covered most of the chapters and details in our Learn platform.
