# How to Build Your First Next.js App: Step-by-Step Tutorial
[Next.js](https://nextjs.org/) is a popular React framework that enables developers to build fast, SEO-friendly, and [scalable web applications](https://www.bytescrum.com/). It offers powerful features like server-side rendering, static site generation, and API routes, making it an excellent choice for modern web development. In this step-by-step guide, we'll walk through the process of building your first Next.js application from scratch.
### Step 1: Setting Up Your Development Environment
Before we start building, ensure you have Node.js and npm (or Yarn) installed on your machine. You can download and install them from [Node.js](https://nodejs.org/).
### Step 2: Create a New Next.js Application
[Next.js](https://blog.bytescrum.com/introduction-to-nextjs-the-ultimate-react-framework-for-production) provides a boilerplate generator that makes it easy to start a new project. Run the following command to create a new Next.js application:
```bash
npx create-next-app my-next-app
```
Replace `my-next-app` with your desired project name. This command sets up a new Next.js project with all the necessary files and dependencies.
### Step 3: Run the Development Server
Navigate to your project directory and start the [development](https://blog.bytescrum.com/how-to-set-up-a-nextjs-project-with-typescript-prettier-and-husky) server:
```bash
cd my-next-app
npm run dev
```
Your application should now be running at [`http://localhost:3000`](http://localhost:3000). Open this URL in your browser to see the default Next.js welcome page.
### Step 4: Create Your First Page
Next.js uses a file-based routing system where each file in the `pages` directory corresponds to a route in your application. Let's create a new page called `about.js`.
1. Create a new file in the `pages` directory:
```bash
touch pages/about.js
```
2. Add the following content to `pages/about.js`:
```javascript
// pages/about.js
const About = () => {
return (
About Us
Welcome to the about page of our Next.js application.
);
};
export default About;
```
You can now navigate to [`http://localhost:3000/about`](http://localhost:3000/about) to see your new About page.
### Step 5: Adding a Navigation Menu
To navigate between pages, let's add a simple navigation menu to our application. We'll do this by creating a layout component.
1. Create a new directory called `components`:
```bash
mkdir components
```
2. Create a new file called `components/Layout.js` and add the following content:
```javascript
// components/Layout.js
import Link from 'next/link';
const Layout = ({ children }) => {
return (
);
};
export default Layout;
```
3. Wrap your pages with the Layout component. Modify `pages/index.js` as follows:
```javascript
// pages/index.js
import Layout from '../components/Layout';
const Home = () => {
return (
Home Page
Welcome to our Next.js application.
);
};
export default Home;
```
4. Update `pages/about.js` to use the Layout component:
```javascript
// pages/about.js
import Layout from '../components/Layout';
const About = () => {
return (
About Us
Welcome to the about page of our Next.js application.
);
};
export default About;
```
### Step 6: Fetching Data with getStaticProps
Next.js supports static site generation, allowing you to fetch data at build time. Let's create a page that fetches and displays a list of posts.
1. Create a new file called `pages/posts.js`:
```bash
touch pages/posts.js
```
2. Add the following content to `pages/posts.js`:
```javascript
// pages/posts.js
import Layout from '../components/Layout';
export const getStaticProps = async () => {
const res = await fetch('https://jsonplaceholder.typicode.com/posts');
const posts = await res.json();
return {
props: {
posts,
},
};
};
const Posts = ({ posts }) => {
return (
Posts
{posts.map(post => (
-
{post.title}
{post.body}
))}
);
};
export default Posts;
```
Now, navigate to [`http://localhost:3000/posts`](http://localhost:3000/posts) to see the list of posts fetched from the API.
### Step 7: Adding API Routes
Next.js allows you to create API routes within your application. These routes can be used to handle backend logic, database interactions, or third-party API requests.
1. Create a new directory called `pages/api`.
```bash
mkdir pages/api
```
2. Create a new file called `pages/api/hello.js`:
```bash
touch pages/api/hello.js
```
3. Add the following content to `pages/api/hello.js`:
```javascript
// pages/api/hello.js
export default function handler(req, res) {
res.status(200).json({ message: 'Hello from Next.js API!' });
}
```
You can now access this API endpoint at [`http://localhost:3000/api/hello`](http://localhost:3000/api/hello).
Conclusion
Congratulations! You've built your first Next.js application with a home page, about page, navigation menu, data fetching, and API routes. Next.js is a powerful framework that simplifies many aspects of web development, from routing and data fetching to server-side rendering and static site generation.