1. Kiến Thức Nền Tảng Cần Có

1. HTML & CSS

  • Biết cách tạo giao diện cơ bản
  • Responsive
  • Flexbox, Grid

2. JavaScript

  • Biết ES6+
  • Arrow function
  • Promise & Async/Await
  • Fetch API
  • Module import/export

3. Terminal Cơ Bản

Các lệnh:

cd, ls, mkdir, rm, npm install

2. Học React.js Trước Khi Vào Next.js

Những kiến thức React cần nắm:

  • Component
  • Props
  • State
  • Hook: useState, useEffect
  • useContext
  • Lifecycle
  • JSX
  • Event

3. Bắt đầu với Next.js 2025 - App Router

1. Tạo dự án Next.js

  • Cài bằng npm
npx create-next-app@latest my-app
cd my-app
npm run dev
  • Cài bằng yarn
yarn create next-app my-app
cd my-app
yarn dev

4. Next.js App Router - Các Kiến Thức Quan Trọng Nhất

1. Cấu trúc thư mục

  • /app
  • /app/page.js
  • /app/layout.js
  • /app/(routes)
  • /app/api

2. Routing

  • File-based routing
  • Dynamic route:
    • /app/blog/[slug]/page.js
  • Nested layout

3. Data Fetching 2025

  • fetch() tích hợp
  • Server Component (mặc định)
  • Client Component
  • Streaming

Ví dụ fetch API (server component):

export default async function Page() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();
  return <div>{data.title}</div>;
}

5. Styling Trong Next.js

1. CSS Modules

2. Tailwind CSS (phổ biến 2025)

  • Cài Tailwind bằng npm
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
  • Cài bằng yarn
yarn add -D tailwindcss postcss autoprefixer
yarn tailwindcss init -p

6. Next.js SEO - Tối ưu chuẩn Google 2025

1. Metadata API

export const metadata = {
  title: "Trang chủ",
  description: "Mô tả trang web"
};

2. Open Graph

3. Structured Data JSON-LD

7. API Routes Trong Next.js

Tạo API backend trực tiếp trong /app/api.

Ví dụ:

// app/api/hello/route.js
export async function GET() {
  return Response.json({ message: "Hello Next.js" });
}

8. Database Trong Next.js

Phổ biến nhất 2025:

  • Prisma + PostgreSQL
  • PlanetScale
  • MongoDB

Cài Prisma bằng npm

npm install prisma --save-dev
npx prisma init

Cài bằng yarn

yarn add -D prisma
yarn prisma init

9. Authentication

Dùng NextAuth (Auth.js)

Cài bằng npm

npm install next-auth

Cài bằng yarn

yarn add next-auth

Các loại đăng nhập:

  • Email/password
  • Google
  • GitHub
  • Facebook

10. Triển Khai Sản Phẩm (Deploy)

Phổ biến nhất 2025:

  • Vercel (chính chủ)
  • Netlify
  • Docker
  • AWS

Deploy mạnh nhất: Vercel

  • Kết nối GitHub
  • Auto build
  • Miễn phí + cực nhanh

11. Dự Án Thực Hành Từ A-Z

Gợi ý 5 project theo cấp độ:

Cấp độ 1 - Beginner

  • Website cá nhân
  • Landing page

Cấp độ 2 - Intermediate

  • Blog có SEO
  • App quản lý ghi chú

Cấp độ 3 - Advanced

  • E-commerce full-stack
  • Dashboard Admin
  • Ứng dụng chat real-time

12. Lộ Trình 30 Ngày Học Next.js

Tuần 1: React + JS

Tuần 2: Next.js Cơ bản

Tuần 3: API + Database + Auth

Tuần 4: Làm project + Deploy

Kết luận

Lộ trình học Next.js 2025 cần:

  • Kiến thức HTML, CSS, JavaScript vững
  • Nắm React
  • Làm chủ Next.js App Router
  • Hiểu SEO, API Routes, Database, Auth, Deployment
  • Thực hành dự án thực tế

Chỉ cần đi đúng roadmap, bạn có thể trở thành Next.js Developer trong 1–2 tháng.