🔰 Module 1: Introduction & Setup of Next Js

Mastering Next.js 14+ with TypeScript & src/ Structure

Welcome to the first step of your journey in mastering Next.js 14+ — the most advanced and flexible React framework out there. In this module, we’ll cover what makes Next.js 14 so powerful, how it compares to other tools, and how to set up a modern project using TypeScript and the new src/ directory layout.

🚀 What is Next.js 14 — and Why Should You Care?

Next.js 14 is a React framework built by Vercel that enables you to create full-stack web apps with:

• Server components and client components
• Server-side rendering (SSR), static generation (SSG), and incremental rendering (ISR)
• API routes and server actions
• File-based routing with App Router
• Automatic image optimization, metadata handling, and much more

It replaces the traditional “frontend-only” mindset with a full-stack developer experience, without having to leave the React ecosystem.

⚖️ Next.js vs CRA vs Gatsby

Here’s how Next.js 14 compares to Create React App (CRA) and Gatsby:

✅ Verdict: If you’re serious about building production-ready apps with modern architecture, Next.js 14 is the clear winner.

🛠️ Installing the Prerequisites

✅ Install Node.js

Download and install the LTS version from https://nodejs.org. This includes:

• node: JavaScript runtime
• npm: Node package manager

To check versions:

node -v
npm -v

✅ Install VS Code

VS Code is the preferred editor for React and Next.js developers.

Download it from https://code.visualstudio.com and install these extensions:

• ESLint
• Prettier
• Tailwind CSS IntelliSense
• TypeScript React Support

🧱 Creating Your Next.js 14 Project with TypeScript and src/

Use the official command-line tool to scaffold your app:

npx create-next-app@latest

Answer the prompts as follows:

• Project Name: next14-ts-app (or any name you like)
• Use TypeScript? ✅ Yes
• Use App Router? ✅ Yes
• Use Tailwind CSS? ✅ Yes
• Use src/ directory? ✅ Yes
• Import alias? 👉 Yes (@/* is recommended)
• Use ESLint/Prettier? ✅ Yes (Optional but useful)

Once done:

cd next14-ts-app
npm run dev

Visit http://localhost:3000 and boom — your app is live!

🗂️ Project Structure with src/

After choosing the src/ layout, your project structure will look like this:

next14-ts-app/
├── public/                → Static files (images, favicon)
├── src/
│   ├── app/               → App Router pages, layouts, templates
│   │   └── page.tsx       → Homepage
│   ├── components/        → Reusable UI components
│   ├── styles/            → Tailwind + global styles
│   ├── lib/               → Utility functions or DB logic (optional)
│   ├── types/             → TypeScript types (optional)
│   └── app/layout.tsx     → Root layout
├── tailwind.config.ts     → Tailwind setup
├── tsconfig.json          → TypeScript settings
└── next.config.js         → Next.js configuration

🌀 Setting Up Tailwind CSS (If Skipped)

If you didn’t enable Tailwind CSS during setup, install it manually:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Then configure your tailwind.config.ts:

content: [
  "./src/**/*.{js,ts,jsx,tsx}",
]

And include Tailwind in your global stylesheet (src/app/globals.css):

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

Import globals.css in src/app/layout.tsx:

import './globals.css';

🧪 TypeScript Is Fully Integrated

By default, your project is now written in TypeScript — a must-have for production-level React apps. Benefits include:

• Static type checking
• Better autocompletion and tooling
• Cleaner, safer code

Example component:

type Props = {
  title: string;
}

const Heading = ({ title }: Props) => (
  <h1 className="text-2xl font-bold">{title}</h1>
);

export default Heading;

✅ Summary: You’re Ready to Build

By the end of Module 1, you have:

• Understood why Next.js 14 is the future of React
• Compared it with CRA and Gatsby
• Installed Node, VS Code, and useful extensions
• Created a project using TypeScript + App Router + Tailwind
• Adopted the modern src/ folder structure

🎉 You’re now fully set up for modern full-stack web development!

🔜 Up Next:

In Module 2, we’ll explore Routing & Navigation — from file-based routes to dynamic segments and shared layouts.

Want the blog version in Markdown or HTML export as well?