JSX trong Next.js
AI bổ sungNó là gì?
Cú pháp mở rộng JavaScript cho phép viết HTML/XML trực tiếp trong file .js/.tsx, được Next.js (dựa trên React) biên dịch thành React.createElement.
Dùng để làm gì?
Viết giao diện người dùng (UI) theo kiểu declarative, tách biệt logic và template, tận dụng type-checking của TypeScript.
Chạy ở đâu?
Chạy ở Server (Server Components mặc định Next.js 13+) và Client (Client Components 'use client'), được hydrate trên Browser.
Nó thường đi với gì?
React, TypeScript, Tailwind CSS, Server Components, Client Components
App của mình khi nào cần?
Xây dựng mọi trang/web app Next.js; cần component hóa UI, tái sử dụng, type-safe.
Khi nào không cần?
Viết script backend thuần Node.js, API route không trả HTML, hoặc project dùng template engine khác (EJS, Pug).
Từ khóa lỗi thường gặp
Adjacent JSX elements must be wrapped, Expected corresponding JSX closing tag, 'use client' missing, Hydration mismatch
Một câu để nhớ
JSX = JavaScript + XML; Next.js mặc định chạy trên Server, thêm 'use client' mới chạy Browser.