PHASE 2 — Topic 5: Creating a Fresh Next.js 16 Project with TypeScript and Tailwind CSS

We finished all the theory of Phase 1. Now it's time to get hands-on. In this post, we set up the actual project we will use for the rest of this course.

Requirements Before You Start

Make sure you have these installed on your machine:

• Node.js, version 20.9 or higher
• A code editor (VS Code is recommended)
• A terminal (Command Prompt, PowerShell, or any terminal you prefer)

You can check your Node.js version with:

    node -v

If it shows something below 20.9, update Node.js first before continuing.

Step 1: Create the Project

Next.js provides an official command that scaffolds a complete project for you, including TypeScript and Tailwind CSS, without any manual setup. Run this in your terminal:

    npx create-next-app@latest socket-chat-app

You will be asked a series of questions. Answer them like this:

    Would you like to use TypeScript?        Yes
    Which linter would you like to use?      ESLint
    Would you like to use Tailwind CSS?      Yes
    Would you like your code inside a src/ directory?   Yes
    Would you like to use App Router?        Yes
    Would you like to customize the import alias (@/*)? No
    Would you like to include AGENTS.md?     No

This creates a new folder called socket-chat-app with everything already configured: TypeScript, Tailwind CSS, ESLint, and the App Router.

Step 2: Move Into the Project and Start It

    cd socket-chat-app
    npm run dev

Open your browser at http://localhost:3000. If you see the default Next.js welcome page styled with Tailwind, everything is working correctly.

Step 3: Understanding What Was Created

Here are the important files and folders you will be working with throughout this course:

    socket-chat-app/
    ├── src/
    │   ├── app/
    │   │   ├── layout.tsx      → Root layout, wraps every page
    │   │   ├── page.tsx        → The homepage
    │   │   └── globals.css     → Global styles, Tailwind import
    ├── public/                 → Static files (images, icons)
    ├── package.json            → Project dependencies and scripts
    ├── tsconfig.json           → TypeScript configuration
    ├── next.config.ts          → Next.js configuration

Step 4: How Tailwind Is Set Up (v4)

Next.js 16 ships with Tailwind CSS v4 by default, which works differently from older versions. There is no tailwind.config.js file anymore. Instead, open src/app/globals.css, and you will see something like this:

    @import "tailwindcss";

That single line is enough to enable all of Tailwind's utility classes throughout your project. Any custom theme values (colors, fonts, spacing) can also be defined directly inside this same CSS file using a @theme block, but for this course, the defaults are enough to get started.

Step 5: Confirm TypeScript and Tailwind Are Both Working

Open src/app/page.tsx and replace its content with this:

  export default function Home() {
    return (
      <main className="flex min-h-screen flex-col items-center justify-center bg-gray-900 text-white">
        <h1 className="text-4xl font-bold">
          Next.js + TypeScript + Tailwind CSS
        </h1>
        <p className="mt-4 text-gray-400">
          Setup complete. Ready for Socket.IO.
        </p>
      </main>
    );
  }

Save the file, and check your browser. You should see a dark background, centered white heading, and gray subtext. If the styling appears correctly, both TypeScript and Tailwind are working as expected.

What We Have Not Installed Yet

At this stage, we only have a standard Next.js project. We have not installed Socket.IO yet, and we also have not set up the custom server that Socket.IO requires. That is intentional, because Socket.IO needs a persistent server, which works a bit differently from how Next.js normally runs. We will cover exactly why in the next post, before touching any Socket.IO code.

Summary

• We created a fresh Next.js 16 project using create-next-app, with TypeScript, Tailwind CSS, ESLint, and the App Router enabled
• Tailwind CSS v4 no longer needs a config file; it is enabled with a single @import "tailwindcss"; line in globals.css
• We verified the setup by rendering a simple styled page
• The project is not yet ready for Socket.IO, since that requires a persistent server, which is the topic of the next post

In the next post, we will understand why Socket.IO needs a persistent server, and how this fits into a Next.js application.