Trang đầu tiên

Thuộc phần Kiến thức thiết yếu về Next.js trong hành trình React của Coddy. Bài học 3 trên 47.

Đã đến lúc chỉnh sửa một trang. app/page.jsx là một thành phần React thông thường, giống như những thành phần bạn đã viết trong suốt khóa Fundamentals:

export default function Home() {
    return (
        <main>
            <h1>Welcome!</h1>
        </main>
    );
}

Hai quy tắc nhỏ không bao giờ thay đổi:

Trang phải là default export của tệp: đó là cách Next.js tìm thấy trang
Bạn có thể tự đặt tên cho component; chỉ tên tệp và thư mục quyết định URL

Hãy chú ý những gì còn thiếu: không có đăng ký tuyến đường, không có import router, không có ReactDOM.render. Bạn viết một component trong đúng tệp, và nó sẽ là một trang.

Thử thách

Người mới

Để trang chủ chào hỏi.

Trong app/page.jsx, bên trong <main>, hãy thêm một <h1> có id="title".
Văn bản bên trong phải chính xác là Welcome to Next.js.

Tự làm thử

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}

Tự kiểm tra

Bài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.

Tất cả bài học trong Kiến thức thiết yếu về Next.js

1Vì sao dùng Next.js

Next.js bổ sung gì Thư mục appTrang đầu tiênÔn tập: Vì sao dùng Next.js

4Máy chủ và client

Hai loại thành phần Đọc lỗi Dòng 'use client'Giữ phần client nhỏ gọn Máy chủ bên trong client Tóm tắt: máy chủ và client

7Điều hướng phía máy khách

Liên kết đang hoạt động Điều hướng bằng code Lọc bằng URL Bộ xử lý tuyến đường Ôn tập: Điều hướng

3Bố cục và siêu dữ liệu

Bố cục gốc Điều hướng dùng chung Bố cục lồng nhau Siêu dữ liệu trang Siêu dữ liệu động Ôn tập: bố cục

6Server Actions

Server Action là gì Biểu mẫu có thể hoạt động Đọc dữ liệu biểu mẫu Làm mới trang Ôn tập: Server Actions