Next.js is a popular React framework for building static and server-rendered applications with ease. In this article, we’ll guide you through the steps to create a new Next.js project, set up the initial configuration, and update the basic files to get started. Let’s dive in!

Step 1: Create a New Next.js Project

First, we need to create a new Next.js project. Open your terminal and run the following command:

npx create-next-app@latest

This command will prompt you to enter some information and select various options for the setup. Here are the steps you’ll follow:

  1. What is your project named? Enter the name of your project (e.g., my-nextjs-app).

  2. Would you like to use TypeScript with this project? Select Yes to use TypeScript.

  3. Would you like to use ESLint with this project? Select Yes to use ESLint.

  4. Would you like to use Tailwind CSS with this project? Select Yes to use Tailwind CSS.

  5. Would you like to use src/ directory? Select Yes to use the src/ directory.

  6. Would you like to use experimental app/ directory? Select Yes to use the experimental app/ directory.

  7. What import alias would you like configured? Press Enter to use the default alias (@/*).

Once done, navigate to your project directory:

cd my-nextjs-app

Step 2: Update Metadata

Next.js allows you to configure metadata for your application, such as the title and description. Open the file src/app/layout.tsx and update the metadata as follows:

export const metadata: Metadata = {
  title: "My NextJS App",
  description: "Learning NextJS",
};

This will set the title of your application to “My NextJS App” and the description to “Learning NextJS”.

Step 3: Set Up Global CSS

Next, we need to set up the global CSS for our project. Tailwind CSS is a popular utility-first CSS framework that can be easily integrated with Next.js. Open the file src/app/globals.css and update it by removing everything except the following lines:

@tailwind base;
@tailwind components;
@tailwind utilities;

These lines import the base styles, components, and utilities from Tailwind CSS.

Step 4: Update the Home Page

Finally, let’s update the content of the home page. Open the file src/app/page.tsx and replace its content with the following code:

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1>Hello World!</h1>
    </main>
  );
}

This code defines a simple home page component that displays “Hello World!” centered on the screen.

Step 5: Run the Application

To see your new Next.js application in action, start the development server. Run the following command in your terminal:

npm run dev

Open your browser and navigate to http://localhost:3000. You should see your “Hello World!” message displayed.

Conclusion

You’ve now set up a basic Next.js project with TypeScript and Tailwind CSS, and customized the initial configuration. From here, you can start building your application, adding more pages, and exploring the powerful features of Next.js. Happy coding!