Building Your First Next.js App: A Beginner's Guide

Welcome! This guide will walk you through building your first Next.js application. Next.js is a powerful React framework that allows you to easily build modern web applications with features like server-side rendering, static site generation, and optimized performance.

Prerequisites

Before we begin, you'll need the following:

1. Node.js and npm (or yarn) installed on your system.
2. A basic understanding of HTML, CSS, and JavaScript is recommended, but not strictly required.
3. Familiarity with React is helpful, but we'll explain the basics.

Setting Up Your Project

Let's create a new Next.js project using the `create-next-app` command. Open your terminal and run the following command:

1npx create-next-app my-first-app

Replace `my-first-app` with the name you want to give your project. This command will create a new directory with the project's files.

Navigate into your project directory:

1cd my-first-app

Running the Development Server

To start the development server, run:

1npm run dev

This will start the Next.js development server, and you can view your app at `http://localhost:3000` in your browser. You should see the default Next.js welcome page.

Understanding the Project Structure

Here's a brief overview of the key files and directories:

• pages/: This directory contains your application's pages. Each file in this directory corresponds to a route in your application. For example, `pages/index.js` is the root page at `/`.
• public/: This directory is for static assets like images, fonts, and other files that you want to be accessible from your website.
• components/: You can store reusable React components in this directory.
• styles/: Place your CSS or other styling files here.

Creating Your First Page

Let's customize the `index.js` page. Open `pages/index.js` in your code editor. Replace the existing content with the following:

1function HomePage() {
2  return (
3    <div>
4      <h1>Welcome to My Next.js App!</h1>
5      <p>This is my first Next.js page.</p>
6    </div>
7  );
8}
9
10export default HomePage;

Save the file. Go back to your browser, and refresh `http://localhost:3000`. You should now see your customized content.

Adding a Second Page (Routing)

Create a new file named `pages/about.js`. Add the following content:

1function AboutPage() {
2  return (
3    <div>
4      <h1>About Us</h1>
5      <p>Learn more about our awesome app!</p>
6    </div>
7  );
8}
9
10export default AboutPage;

Now, go to `http://localhost:3000/about` in your browser. You'll see the content from your `about.js` page. Next.js automatically creates routes based on your file structure.

Adding Navigation (Links)

To navigate between pages, import the `Link` component from `next/link`. Modify `pages/index.js` to include a link to the about page:

1import Link from 'next/link';
2
3function HomePage() {
4  return (
5    <div>
6      <h1>Welcome to My Next.js App!</h1>
7      <p>This is my first Next.js page.</p>
8      <Link href="/about">
9        <a>About</a>
10      </Link>
11    </div>
12  );
13}
14
15export default HomePage;

Add a similar link in `pages/about.js` to link back to the home page:

1import Link from 'next/link';
2
3function AboutPage() {
4  return (
5    <div>
6      <h1>About Us</h1>
7      <p>Learn more about our awesome app!</p>
8      <Link href="/">
9        <a>Home</a>
10      </Link>
11    </div>
12  );
13}
14
15export default AboutPage;

Now you should be able to navigate between the home and about pages by clicking the links. The `Link` component handles client-side navigation, making the experience fast and smooth.

Styling Your App

Next.js supports various styling approaches, including CSS Modules, styled-components, and Tailwind CSS. Let's add basic styling using global CSS. Create a file named `styles/global.css` (or edit an existing one).

1body {
2  font-family: sans-serif;
3  background-color: #f0f0f0;
4  margin: 0;
5  padding: 0;
6}
7
8h1 {
9  color: blue;
10  padding: 10px;
11}
12

Import this file into your `_app.js` file (create this if you don't have one in pages). This is the entry point of your application.

1import '../styles/global.css';
2
3function MyApp({ Component, pageProps }) {
4  return <Component {...pageProps} />;
5}
6
7export default MyApp;

Refresh your browser, and you should see the changes applied to your app. You can style individual components by importing a CSS Module (`.module.css`) or using other styling methods.

Deploying Your App

Next.js apps can be deployed to various platforms, including Vercel (which is the easiest), Netlify, and others. For deployment to Vercel, simply push your code to a Git repository (like Github or Gitlab) and import the repository into Vercel. Vercel will automatically detect the project as a Next.js app and configure everything for you.

Conclusion

Congratulations! You've built your first Next.js application. This guide provides a basic foundation. Next.js offers many more features such as API routes, data fetching, and advanced routing that you can explore to build more complex applications. Happy coding!

For further learning, refer to the Next.js documentation.