Running your first Next.js app

1. Introduction

This tutorial aims to guide you through the process of setting up and running your first Next.js application. Next.js is a powerful JavaScript framework built on React, which allows you to build server-side rendering and static web applications.

By the end of this tutorial, you will be able to:

• Understand the basics of Next.js
• Set up a new Next.js project
• Create a simple app using Next.js

Prerequisites:

• Basic knowledge of JavaScript, HTML, and CSS
• Node.js and npm installed on your machine

2. Step-by-Step Guide

Firstly, you'll need to install Next.js, which can be done via npm (Node Package Manager). npm is included with Node.js, which you should have installed as a prerequisite.

Installation

To create a new Next.js application, open your terminal and run the following command:

npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

This command does a few things:

• npx is a tool that comes with npm and allows you to run packages.
• create-next-app@latest is a package that sets up a new Next.js app.
• nextjs-blog is the name of your app. You can replace this with your preferred name.
• --use-npm instructs the command to use npm for package management.
• --example is used to specify a starter template for your app. The value given is a simple blog starter.

Running the App

Once the installation is complete, navigate to your new project's directory:

cd nextjs-blog

Then, start your Next.js app by running:

npm run dev

This starts your app in development mode. Open your browser and visit http://localhost:3000 to see your app.

3. Code Examples

Let's modify the default page in our Next.js app.

Navigate to the pages directory in your project. This is where all your app's pages are stored. Open index.js. You should see something like this:

export default function Home() {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
    </div>
  )
}

This is a simple React component that renders a "Welcome to Next.js!" heading. Change the heading to "Hello, World!".

export default function Home() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  )
}

Save your changes, and your app will automatically reload. You should now see "Hello, World!" on http://localhost:3000.

4. Summary

In this tutorial, you've learned how to set up and run a Next.js app, and how to modify a page. You now have the basic knowledge to start creating your own Next.js applications!

Next steps could include learning more about Next.js routing, data fetching, and API routes. Check out the Next.js documentation to learn more.

5. Practice Exercises

1. Create a new page in your app at the /about route. The page should display "About Me" in a heading.
2. Install and use a CSS-in-JS library (like styled-components) to style your "Hello, World!" heading.
3. Fetch data from a public API and display it on a page in your app.

For further practice, continue to expand your app. Consider adding navigation, more pages, and more complex styling. Continue to explore the Next.js documentation and experiment with its many features.