Tutorial Next JS Bahasa Indonesia Pages Router : 1.Setup Project

Introduction

In this tutorial, we will walk through the setup of a Next.js project using the Pages Router. This guide is designed for beginners who want to get started with Next.js, a powerful React framework for building web applications. By the end of this tutorial, you will have a basic Next.js project up and running.

Step 1: Install Node.js

Before you can create a Next.js project, ensure that Node.js is installed on your machine.

1. Visit the Node.js official website.
2. Download the installer for your operating system.
3. Follow the installation instructions.
4. Verify the installation by running the following command in your terminal:

   node -v
   

   This should display the installed version of Node.js.

Step 2: Create a New Next.js Project

Now that Node.js is installed, you can create a new Next.js project.

1. Open your terminal.
2. Navigate to the directory where you want to create your project.
3. Run the following command to create a new Next.js application:

   npx create-next-app@latest my-next-app
   

   Replace my-next-app with your desired project name.
4. Navigate into your project directory:

   cd my-next-app
   

Step 3: Start the Development Server

You can now start the development server to see your project in action.

1. In the terminal, run the following command:

   npm run dev
   

2. Open your web browser and navigate to http://localhost:3000.
3. You should see the default Next.js welcome page.

Step 4: Understanding the Project Structure

Familiarize yourself with the project structure that Next.js creates for you.

• pages/: This directory contains all your application routes.
• public/: Static files like images can be placed here.
• styles/: CSS files for styling your application.

Step 5: Create Your First Page

Let’s create a simple page to test the Pages Router.

1. Inside the pages directory, create a new file named about.js.
2. Add the following code to about.js:

   export default function About() {
       return <h1>About Page</h1>;
   }
   

3. Save the file.
4. Visit http://localhost:3000/about in your browser to view your new page.

Step 6: Customize Your Project

Now that you have a basic setup, you can start customizing your project.

• Modify the index.js file in the pages directory to change the home page content.
• Explore the styles directory to add custom styles.

Conclusion

Congratulations! You have successfully set up a Next.js project using the Pages Router. You learned how to install Node.js, create a Next.js application, understand the project structure, create a new page, and customize your project.

Next Steps

To continue your Next.js journey, consider exploring:

• Next.js documentation for advanced features.
• Building more complex pages and layouts.
• Integrating APIs and databases into your application.

Feel free to reach out to the Next.js community or check out the resources provided in the video description for further learning. Happy coding!