How To Create a Website with Next.js and React
Tags: nextjs, react, webdev, tutorial
Published: 2020-01-22 16:06:17

---
title: How To Create a Website with Next.js and React
published: true
date: 2020-01-20 14:00:26 UTC
tags: nextjs,react,webdev,tutorial 
canonical_url: https://blog.logrocket.com/how-to-create-a-website-with-next-js-and-react/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/10mex0qmn1yxn0wuyu1x.png
---
**Written by [Nick Major](https://blog.logrocket.com/author/nick-major/)**✏️

[Next.js](https://nextjs.org) is a widely-used framework for building [React](https://reactjs.org) applications that offer server-side rendering, automatic code-splitting, static exporting options, and easy production builds.

It also relieves a lot of the general headaches involved with creating production-ready React applications.

In this tutorial, we’ll show you how to bootstrap a Next.js web application and add some basic components and features of a typical website.

Through that process, you’ll gain an understanding of how to use the framework.

Let’s get started!

### Prerequisites

Before you begin this guide you’ll need the following:

- Node.js installed on your local development machine.

You can follow the instructions on the [Node.js official download page](https://nodejs.org/en/download/) to install Node.js.

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

### Step 1 — Bootstrap a Next.js application

To create a Next.js web application, we need to first create a project directory and install the required dependencies using npm ([Node.js Package Manager](https://www.npmjs.com)).

Open a new terminal window (`Ctrl+Alt+T` on Linux or `Command+Space` on Mac) and execute the command below to create a new project folder that will house your Next.js application (replace “your-project” with the name of your project):

```jsx
mkdir your-project
```

Add `cd` into your new directory:

```jsx
cd your-project
```

Next, run this command to create a `package.json` file in the root of your project:

```jsx
npm init -y
```

The `npm init -y` command creates a `package.json` file in the root of your project directory.

The `-y` flag initializes the file with default values.

The `package.json` file will allow you to easily install and use npm package dependencies in your project. It will also make things like sharing your project with other developers easier if you wish to do so in the future.

Check out the [npm documentation](https://docs.npmjs.com/files/package.json) if you want to learn more about the contents of the `package.json` file.

Now that we have a `package.json` file created, we can install the required npm package dependencies for your Next.js website.

To get started, we’ll need the [Next](https://www.npmjs.com/package/next), [React](https://www.npmjs.com/package/react), and [React-Dom](https://www.npmjs.com/package/react-dom) npm packages.

You can install all of them at once with this command:

```jsx
npm install --save next react react-dom
```

When those finish installing, you’ll notice that a new `node_modules` directory was created in your project.

This directory stores all of the installed dependencies for your project.

If you look inside, you’ll notice that the three npm packages you installed and all of their sub-dependencies are in there.

Since we used the `--save` flag on your `npm install` command, the three dependencies will be listed in the “dependencies” section of your `package.json` file.

In the future when you share your code with others, all of the packages in that list will be installed in the initial setup of the application or when the `npm install` command is run.

Now that we have your dependencies installed, we need a way to start your application.

Open your `package.json` file and replace the “scripts” section with this code:

```jsx
[label package.json]

"scripts": {
  "dev": "next"
},
```

The “dev” script is used to run the application when you’re in development mode.

This means your code will run with special error handling, hot-reloading, and other features that make the development process more pleasant.

Later on, we’ll add more scripts to this section to handle the production versions of your application.

In your terminal, start the application in development mode with this command:

```jsx
npm run dev
```

You’ll see an error when you execute that command:

```jsx
[label Output]

Couldn't find a `pages` directory. Please create one under the project root
```

Next.js looked for a `/pages` directory that holds all the different paths for your website and threw an error when it didn’t find one.

We’ll fix that error in the next section.

### Step 2 — Create your first page

To fix the error and get your website running, we need to create a new directory called `/pages` and add a page to it that Next.js can render.

First, create a `/pages` directory in the root of your project:

```jsx
mkdir pages
```

Add `cd` into it with this command:

```jsx
cd pages
```

Then, add a new file called `index.js`:

```jsx
touch index.js
```

The `/pages` directory will hold all of the pages for your website and the `index.js` file will serve as your homepage at the `/` URL path.

The name of each file in the `/pages` directory will match the URL path in the browser when your website is visited.

For example, a file with the path `/pages/articles.js` will have a URL that displays as `/articles` in the browser. All of this is handled automatically by Next.js.

The `/pages/index.js` file is the only exception as it serves as the homepage at the `/` path.

We need to add some code to your `/pages/index.js` file to give Next.js something to render.  
Open `/pages/index.js` in your favorite text editor and add this code to the file:

```jsx
[label /pages/index.js]

import React, { Component } from 'react'

export default class extends Component {
  render () {
    return (
      <div>Your Next.js App</div>
    )
  }
}
```

The code above creates a React class component and exports it with `export default`.

Save the changes to the file and restart your application with:

```jsx
npm run dev
```

Open your favorite browser and visit `http://localhost:3000`.

You should see the text “Your Next.js App” displayed.

Congratulations, you have now created a working Next.js website!

### Step 3 — Retrieve and display data from an external API

One cool thing about Next.js is the server-side rendering features that it provides. You can fetch and receive data from an external API before your web page loads.

To demonstrate this, we’ll use NASA’s public API to display data from their [Astronomy Picture of the Day](https://apod.nasa.gov/apod/astropix.html) program.

Every day they publish a new photo from the universe with a brief explanation written by an astronomer.

We’ll make requests with an npm package called [Isomorphic-Unfetch](https://www.npmjs.com/package/isomorphic-unfetch). This package is great for Next.js because it works in both client and server environments.

Run this command to install the npm package in your project:

```jsx
npm install --save isomorphic-unfetch
```

Then, reopen your `/pages/index.js` file and replace its contents with this code:

```jsx
[label /pages/index.js]

import React, { Component } from 'react'
import fetch from 'isomorphic-unfetch'

export default class extends Component {
  static async getInitialProps() {
    const res = await fetch("https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")
    const data = await res.json()

    return {
      title: data.title,
      imageUrl: data.url
    }
  }

  render () {
    return (
      <div>
        <div>
          {this.props.title}
        </div>
        <div>
          <img src={this.props.imageUrl} />
        </div>
      </div>
    )
  }
}
```

You’ll notice that we added a new asynchronous function at the top of your React component called `getInitialProps()`.

This is an internal Next.js function that allows you to fetch data and populate your React component via its props before loading the page.

The code in the `getInitialProps()` function is run on the server, and its results are sent back to the page where it was called.

Inside your `getInitialProps()` function, we first make a request to the NASA REST API endpoint for the **Astronomy Picture of the Day** and convert the data response to an object that we can work with.

Using that data, we then populate the React component’s props with the `title` and `imageUrl` data.

Then, we added some `<div>` elements for both of the items and populate them with data using the `this.props` React method.

Save the file and view the changes in your browser.

You should see the title and the image of the day displayed on the page.

### Step 4 — build your application for production

Next.js makes the deployment process easy and pain-free.

First, we need to add both a “build” and “start” script to the `package.json` file.

Open your `package.json` file and make the “scripts” section look like this:

```jsx
[label package.json]

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
},
```

The “build” script will compile your code into server and browser code that will run on a server in production. The “start” script is how you start that production code in the production environment.

To build the application, run the command:

```jsx
npm run build
```

It will take a few moments to finish running.

When it’s done, notice that a new directory called `/.next` was created. There are a lot of different directories and files that Next.js adds to that directory.

For this tutorial, all you need to know is that it’s an optimized version of the code you have been running in development mode.

To start the application in production mode and run the code inside the `/.next` directory, run this command:

```jsx
npm start
```

The production-ready version of your website should now be running at `http://localhost:3000`.

### Conclusion

You have now finished creating a website with Next.js and React. You should now be able to:

- Bootstrap a new Next.js application
- Create new pages in a Next.js application
- Fetch data from an external API and display it on a Next.js page
- Build and run a Next.js application in production

The website we built in this tutorial can be greatly expanded upon.

You can add custom styling using CSS, add more pages to the `/pages` directory, fetch data from another API you or someone else has built, and/or deploy the application to a server and make it accessible to the world.

These are just a few examples of what you could do to enhance your Next.js application.

Have fun exploring and happy coding!

* * * 
## Full visibility into production React apps 

Debugging React applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, [try LogRocket.](https://www2.logrocket.com/react-performance-monitoring)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/eq752g8qhbffxt3hp9t4.png)

[LogRocket](https://www2.logrocket.com/react-performance-monitoring) is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your React apps — [start monitoring for free.](https://www2.logrocket.com/react-performance-monitoring)
* * *

The post [How To Create a Website with Next.js and React](https://blog.logrocket.com/how-to-create-a-website-with-next-js-and-react/) appeared first on [LogRocket Blog](https://blog.logrocket.com).