Next.js 14 Tutorial - 2 - Hello World

Introduction

This tutorial will guide you through creating a simple "Hello World" application using Next.js 14. Next.js is a powerful React framework that enables server-side rendering, static site generation, and much more, making it an excellent choice for building modern web applications.

Step 1: Setting Up Your Next.js Project

To start, you need to create a new Next.js application. Follow these steps:

1. Install Node.js: Ensure you have Node.js installed on your machine. You can download it from nodejs.org.
2. Create a New Next.js Project:
   • Open your terminal or command prompt.
   • Run the following command to create a new Next.js application:

     npx create-next-app@latest hello-world
     

   • Navigate into your project directory:

     cd hello-world
     

Step 2: Running Your Application

Once you've set up your project, it's time to run it:

1. Start the Development Server:
   • In your terminal, run the following command:

     npm run dev
     

   • This command starts the development server. By default, it will be accessible at http://localhost:3000.
2. Open Your Browser: Navigate to http://localhost:3000 to see your application in action.

Step 3: Modifying the Home Page

Next, let's modify the default home page to display "Hello World":

1. Open the Home Page File:

   • Navigate to the pages directory within your project.
   • Open the index.js file.

2. Edit the File:

   • Replace the existing content with the following code:

   export default function Home() {
     return (
       <div>
         <h1>Hello World</h1>
       </div>
     );
   }
   

3. Save Your Changes: Make sure to save the file. Your browser should automatically refresh, and you will see "Hello World" displayed.

Step 4: Styling Your Application

To enhance the appearance of your "Hello World" message, you can add some basic styling:

1. Create a CSS File:

   • In the styles directory, create a new file named Home.module.css.

2. Add Styles:

   • Add the following CSS to Home.module.css:

   h1 {
     color: blue;
     text-align: center;
     margin-top: 50px;
   }
   

3. Import the CSS File:

   • In your index.js file, import the CSS module at the top:

   import styles from '../styles/Home.module.css';
   

4. Apply the Styles:

   • Modify the return statement in the Home function to use the CSS styles:

   return (
     <div>
       <h1 className={styles.h1}>Hello World</h1>
     </div>
   );
   

Conclusion

Congratulations! You've successfully set up a Next.js application and modified it to display "Hello World" with basic styling. You can now explore more features of Next.js, such as routing, API routes, and static generation. Consider diving deeper into the Next.js documentation to expand your knowledge and skills in building web applications. Happy coding!