Làm quen với Next.js cho người mới bắt đầu

Nếu bạn là người mới trong lập trình web và đang chuẩn bị học Next.js thì bài viết này sẽ giúp bạn làm quen với Next.js.

Đối với Next.js thì mình đã nói rất nhiều về khái niệm, chức năng cũng như ưu nhược điểm của nó ở các bài trước, bạn có thể đọc lại tại: Next.js là gì? Tìm hiểu về Next.js.

Một số đặc điểm chính trong Next.js:

  • Pages .
  • Tìm nạp dữ liệu .
  • Hỗ trợ tích hợp CSS.
  • Layouts.
  • Tối ưu hóa hình ảnh, phông chữ.
  • TypeScript.
  • Xử lý tập lệnh.
  • Các trình duyệt và tính năng được hỗ trợ.
  • Biến môi trường.
  • Bắt đầu với Next.js:

    Next.js hỗ trợ hầu hết các hệ điều hành: Linux, macOS, Windows.

  • Pages:
  • Ta sẽ bắt đầu với Pages, trong Next.js thì trang là thành phần được xuất ra từ .js hoặc tệp nằm trong .jsx. Mỗi trang được liên kết với đường dẫn dựa trên tên tệp của nó.

    Ví dụ: Bạn tạo ra pages/index.js như bên dưới thì nó có thể truy cập thông qua /index.

        function Hello() {
          return <div>Hello</div>
        }
    
        export default Hello
    

    Đối với Next thì nó có cũng cấp định tuyến động, ví dụ bạn tạo ra một file với tên gọi pages/posts/[id].js và sau đó có thể truy cập theo id chẳng hạn: post/1, post/2

  • Kết xuất trước:
  • Theo như mặc định thì ở Next.js sẽ cho hiển thị trước mọi trang tức là Next.js tạo trước HTML cho từng trang, thay vì để tất cả được thực hiện bởi JavaScript phía máy khách. Việc làm như vậy giúp mang lại hiệu quả SEO tốt hơn.

    Mỗi HTML được tạo liên kết với mã JavaScript cần thiết cho trang đó và khi một trang được tải bởi trình duyệt, mã JavaScript của nó sẽ chạy và làm cho trang tương tác hoàn chỉnh hơn.

    Hai hình thức kết xuất trước: Next.js có hai cách để kết xuất trước là: Static Generation and Server-side Rendering. Tạo tĩnh là HTML được tạo tại thời điểm xây dựng và sẽ được sử dụng lại theo từng yêu cầu. Kết xuất phía máy chủ là HTML được tạo theo từng yêu cầu.

  • Static Generation:
  • Theo mặc định, Next.js kết xuất trước các trang bằng Tạo tĩnh mà không cần tìm nạp dữ liệu. Đây là một ví dụ:

        function About() {
          return <div>About</div>
        }
        export default About
    

    Bên cạnh đó, một số trang yêu cầu tìm nạp dữ liệu bên ngoài để kết xuất trước: nội dung trang của bạn phụ thuộc vào dữ liệu bên ngoài, đường dẫn trang của bạn phụ thuộc vào dữ liệu bên ngoài.

  • Kết xuất phía máy chủ:
  • Nếu một trang sử dụng Kết xuất phía máy chủ , thì HTML của trang được tạo theo từng yêu cầu . Để sử dụng Kết xuất phía máy chủ cho một trang, bạn cần exportmột asynchàm được gọi getServerSideProps. Chức năng này sẽ được máy chủ gọi theo mọi yêu cầu.

    Ví dụ: trang của bạn cần hiển thị trước dữ liệu được cập nhật thường xuyên (được tìm nạp từ API bên ngoài). Bạn có thể viết getServerSidePropsdữ liệu nào lấy dữ liệu này và chuyển nó vào Pagenhư sau:

        function Page({ data }) {
          // Render data...
        }
    
        // This gets called on every request
        export async function getServerSideProps() {
          // Fetch data from external API
          const res = await fetch(`https://.../data`)
          const data = await res.json()
    
          // Pass data to the page via props
          return { props: { data } }
        }
    
        export default Page
    

    Công nghệ được nhắc đến trong bài viết này

    Tên Công NghệPhiên BảnPhát Hành
    Next.js---
    4 phút đọc·561 lượt xem·