Next.js for Beginners: Building Your First Static Site in 30 Minutes

If you've ever wanted to create a website but didn't know where to start, this article is for you! We will take you through the fundamentals of building your first static website using Next.js, a powerful React framework that makes web development easier and faster. In just 30 minutes, we will cover the essentials, from setting up your development environment to creating your first pages. Let's get started!

Before you can start building your website, you need to set up your development environment. Next.js works with Node.js, so you must have it installed on your machine. If you haven’t installed Node.js yet, head over to the official Node.js website, download the installer for your operating system, and follow the installation directions. Once Node.js is installed, you also get npm (Node Package Manager) installed, which is what we will use to create a new Next.js app. Open your terminal and run the following command to initiate a new Next.js project.

After creating your Next.js application, you need to navigate to the newly created directory. This is where all your project files are stored, and you will be performing all the subsequent steps in this directory. Use the command below to change your current directory to your new project folder.

Next, you’ll want to start your development server. This will allow you to view your website in real time as you make changes to the source code. Run the following command, and your default web browser should open, displaying your new Next.js site in action.

Now it’s time to create your first page! In Next.js, pages are simply React components stored in the 'pages' directory. To create a new page, you can add a file in the 'pages' directory with a .js extension. Let’s create an ‘about’ page. Create a new file named about.js in the pages folder and add the following code to it. This will be your new page that users can visit.

Let’s enhance your homepage, usually the index.js inside the pages directory. Open index.js and modify it to add your site’s title. Here's an example of how you can structure your homepage with some basic content.

Finally, it's time to serve your static site and see it in action. By running the development server, you will be able to access your site locally. The default URL for your Next.js app will be http://localhost:3000. Navigate to that URL in your web browser. You should see the homepage and be able to access your new About page by navigating to http://localhost:3000/about. Congratulations, you have successfully created your first static website with Next.js!

In just half an hour, you've set up a Next.js environment, created a static homepage, and added another page to your site. This is just the beginning; Next.js offers many advanced features such as server-side rendering, API routes, and dynamic routing that you can explore as you become more comfortable. Keep practicing, and soon you'll be able to build more complex applications with ease!