Lior Amsalem Engineering Blog

Learn NextJS

Lior Amsalem's photo
Lior Amsalem
·

3 min read

Creating Your First "Hello, World!" App in Next.js

Next.js is a fast growing React framework that makes building web applications easier and more efficient with various tools and easy framework to learn for begginers. If you're just getting started with Next.js, creating a simple "Hello, World!" application is a great way to understand the basics and we will do so here in this nextjs tutorial for begginers. In this article, we’ll walk through the steps to set up your first Next.js project and display "Hello, World!" on the screen. Another ways to learn nextjs for beginners is with AI tools like gpt or gpteach.us that will guide you throught nextjs code examples.

Step 1: Setting Up Your Development Environment

Before we dive in, ensure you have Node.js installed on your machine. You can download it from nodejs.org. I would also recommend reading this following tutorial nextjs for beginners tutorial that will help you with all relevant steps and installations and downloads.

Install Next.js

  1. Create a New Next.js Project: Open your terminal and run the following command to create a new Next.js application using Create Next App:

     npx create-next-app hello-world

    This command will create a new folder named hello-world and set up a new Next.js project in it.

  2. Navigate to Your Project Directory:

     cd hello-world

  3. Start the Development Server:

    Run the following command to start your Next.js application:

     npm run dev

    Your application will be accessible at http://localhost:3000.

Step 2: Creating the "Hello, World!" Page

Next.js uses a file-based routing system. By default, it comes with an index.js file located in the pages directory, which serves as the main page of your application.

  1. Open the pages/index.js file in your code editor. You’ll see some default code there.

  2. Modify the File: Replace the existing code with the following:

// pages/index.js

export default function Home() {
  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Hello, World!</h1>
    </div>
  );
}

  1. In this code:

    • We define a functional component named Home.

    • The component returns a <div> that contains an <h1> element with the text "Hello, World!".

    • We use inline styles to center the text and add some top margin.

Step 3: View Your Changes

  1. Go Back to Your Browser: With the development server running, navigate to http://localhost:3000.

  2. See the Result: You should see "Hello, World!" displayed on the screen, centered and styled as specified.

Conclusion

Congratulations! You've just created your first Next.js application and displayed "Hello, World!" on the screen. This simple project demonstrates the core concept of Next.js: creating pages using React components and a straightforward routing system.

From here, you can explore more features of Next.js, such as static site generation, API routes, and dynamic routing. The possibilities are endless, and you're on your way to building powerful web applications. Happy coding!

Next.jsJavaScriptTypeScript