How to get started with next.js

Next.js is a popular React framework for building web applications. It offers features like server-side rendering, static site generation, and API routes, making it a great choice for modern web development. In this guide, we'll walk through the steps to get started with Next.js.

Prerequisites

Before we start with next.js. we need to make sure you have the following installed:

Node.js: Next.js requires Node.js version 16.14 or later. You can download it from the official Node.js website.
npm or yarn: Node.js comes with npm (Node Package Manager) by default. You can also use yarn, which is another popular package manager.

Step 1: Create a New Next.js App

The easiest way to create a new Next.js app is by using the create-next-app command. This command sets up everything you need to start building your app.

Open your terminal.
Run the following command:
```
npx create-next-app@latest <my-next-app>
```
- npx is a tool that comes with npm and allows you to run packages without installing them globally.
- create-next-app is the official command-line tool for creating Next.js apps.
- my-next-app is the name of your app. you can skip this component as this will be asked by utility as a part of questionnaire.
Follow the prompts. The command will ask you a few questions:
- What is your project named? (default: my-next-app)
- Would you like to use TypeScript? (yes/no)
- Would you like to use ESLint? (yes/no)
- Would you like to use Tailwind CSS? (yes/no)
- Would you like to use src/ directory? (yes/no)
- Would you like to use App Router? (yes/no)
- Would you like to customize the default import alias? (yes/no)
Choose the options that best suit your needs.
Important note about src folder as per Next.js documentation , using a src folder is completely optional but fully supported. By default almost all sample applications from Next.js dont use src folder. v0, does not use src folder when it generates application. Also, when I tried with few code assistants, even when I requested to use src folder structure, they created components and few other folders at root as well as inside src folder. Ideally, src folder make sense to keep structure clearn but not using src is not a major issue. For now, I am not using src folder.
Navigate to your app's directory:
```
cd my-next-app
```

Step 2: Run the Development Server

Now that your app is created, you can start the development server to see it in action.

Run the following command:
```
npm run dev     
```
Access your App in the Browser.

After running npm run dev, the terminal will show you something like:
```
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
```
Open your web browser and go to http://localhost:3000 (or whatever port is shown in your terminal). You should see the default Next.js welcome page!