Prerequisites
Node.js:>Next.js is built on top of Node.js, so you need to have it installed.
>You can download and install the latest version of Node.js from here. It's recommended to install the LTS version.
npm or yarn:
>npm comes with Node.js, so once you install Node.js, npm is already installed.
>Alternatively, you can use Yarn as the package manager. You can install Yarn by running:
BASH
npm install --global yarn
Text Editor/IDE:
>You’ll need a code editor to work on your project, such as Visual Studio Code or any other text editor.
Installation Process for Next.js Project
1. Create a New Next.js App
To start a new Next.js project, you can use Create Next App, which is a starter template.++Open your terminal/command prompt.
++Run the following command to create a new Next.js app:
BASH
npx create-next-app@latest my-site++This will automatically create a new directory called
my-site and set up a basic Next.js project.++If you prefer using Yarn, you can run:
BASH
yarn create next-app my-site2. Navigate to Your Project Directory
After the setup process is complete, navigate into your newly created project directory: BASH
cd my-site3. Install Dependencies
If dependencies haven't been installed automatically during project creation, run the following command to install them: BASH
npm installOr, if you're using Yarn:
BASH
yarn install4. Running the Project Locally
To start the Next.js development server locally, run the following command: BASH
npm run devThis will start the development server at
http://localhost:3000. You can open this URL in your browser to view your Next.js app running locally.Next Steps
Editing the Site:>Open the project in your code editor and start editing the files in the
pages directory (or app directory) to customize your site.>The default
pages/index.js (or app/page.tsx) file is the homepage of your app. When you edit this file, your browser will automatically reload to reflect the changes.Additional Commands
Build the app for production: BASH
npm run build
That's it! You now have a Next.js website running locally on your machine. Feel free to explore more features of Next.js as you develop your website. Check what a class in JavaScript is HERE
