Getting Started with Next.js: A Beginner’s Guide

What is Next.js?

Next.js is a popular framework for building server-side rendered React applications. It offers a range of features, including automatic code-splitting, static exporting options, and easy production builds. With Next.js, you can create production-ready React applications with ease.

Prerequisites

Before you begin, make sure you have Node.js installed on your local development machine. You can download Node.js from the official website.

Bootstrapping a Next.js Application

There are two ways to bootstrap a Next.js application: using the create-next-app command or setting up a project manually.

Using create-next-app

To use create-next-app, open a new terminal window and run the following command:


npx create-next-app my-app


Replace my-app with the name of your project. This command will prompt you for a project name and then create a new Next.js project.

Setting up a Project Manually

To set up a project manually, create a new project directory and install the required dependencies using npm. Open a new terminal window and execute the following commands:


mkdir my-app
cd my-app
npm init -y
npm install next react react-dom


Replace my-app with the name of your project. This will create a new project directory and install the required dependencies.

Creating Pages

In Next.js, pages are stored in the /pages directory. To create a new page, create a new file in the /pages directory and add some code to it. For example, create a new file called index.js and add the following code:

“`jsx
import Head from ‘next/head’;

function HomePage() {
return (

);
}

export default HomePage;
“`

This code creates a new React component that displays a heading and sets the page title.

Fetching Data from an External API

One of the cool features of Next.js is its ability to fetch data from an external API and display it on a page. To demonstrate this, let’s use NASA’s public API to display the Astronomy Picture of the Day.

First, install the isomorphic-unfetch package:


npm install isomorphic-unfetch


Then, modify the index.js file to fetch data from the API:

“`jsx
import Head from ‘next/head’;
import fetch from ‘isomorphic-unfetch’;

function HomePage() {
const [data, setData] = useState(null);

useEffect(() => {
async function fetchData() {
const response = await fetch(‘https://api.nasa.gov/planetary/apod’);
const data = await response.json();
setData(data);
}
fetchData();
}, []);

return (

);
}

export default HomePage;
“`

This code fetches data from the NASA API and displays the title and image on the page.

Building and Running the Application

To build the application, run the following command:


npm run build


This will create an optimized version of the code in the /.next directory.

To start the application in production mode, run the following command:


npm run start


This will start the production-ready version of the application at http://localhost:3000.

Conclusion

Congratulations! You have now created a basic Next.js application that fetches data from an external API and displays it on a page. From here, you can add more features, customize the styling, and deploy the application to a server. Happy coding!