Phiên bản 13.4 của Next.js có gì mới?

hovanban

hovanban

Well-known member
Next.js 13.4 một phiên bản cơ bản, đánh dấu sự ổn định cho App Router.
  • App Router (Stable):
    • React Server Components
    • Nested Routes & Layouts
    • Simplified Data Fetching (Lấy dữ liệu đơn giản hơn)
    • Streaming & Suspense (Phát trực tiếp và Suspense)
    • Built-in SEO Support (Hỗ trợ SEO tích hợp sẵn)
  • Turbopack (Beta): Máy chủ chạy trên localhost của bạn, nhanh hơn và độ ổn định được cải thiện.
  • Server Actions (Alpha): Thay đổi dữ liệu trên máy chủ mà không cần JavaScript trên client
Kể từ khi phát hành Next.js 13 cách đây 6 tháng, chúng tôi đã tập trung vào việc xây dựng nền tảng cho tương lai của Next.js — App Router — áp dụng theo từng bước một mà không có những thay đổi không cần thiết.

Hôm nay (05/05), với việc phát hành bản 13.4, giờ đây bạn có thể bắt đầu sử dụng App Router cho sản phẩm của mình.
npm i next@latest react@latest react-dom@latest eslint-config-next@latest

Next.js App Router

Chúng tôi đã phát hành Next.js vào năm 2016 để cung cấp một cách dễ dàng cho các ứng dụng React render phía máy chủ, với mục tiêu của chúng tôi là tạo ra một trang web linh hoạt, được cá nhân hóa và toàn cầu hơn.

Trong bài đăng thông báo ban đầu, chúng tôi đã chia sẻ một số nguyên tắc thiết kế của Next.js:
  • Không cần cài đặt. Sử dụng hệ thống tệp tin như một API
  • Chỉ có JavaScript. Tất cả đều là một hàm
  • Tự động render trên máy chủ và chia nhỏ mã nguồn
  • Việc lấy dữ liệu tùy thuộc vào developer
Next.js hiện đã được sáu tuổi. Các nguyên tắc thiết kế ban đầu của chúng tôi vẫn được giữ nguyên — và khi Next.js đã được áp dụng nhiều hơn bởi developers và các công ty, chúng tôi đang nỗ lực nâng cấp nền tảng để đạt được các nguyên tắc này tốt hơn.

Chúng tôi đang làm việc trên thế hệ tiếp theo của Next.js và hôm nay với phiên bản 13.4, thế hệ tiếp theo này đã ổn định và sẵn sàng để sử dụng. Bài viết này sẽ chia sẻ thêm về các quyết định và lựa chọn thiết kế cho App Router của chúng tôi.

Không cần cài đặt. Sử dụng hệ thống tệp tin như một API
Routing dựa trên hệ thống tệp tin đã trở thành một tính năng cốt lõi của Next.js. Trong bài viết ban đầu của chúng tôi, chúng tôi đã trình bày ví dụ này về cách tạo tuyến đường từ một thành phần React duy nhất:

// Pages Router
// pages/about.js

import React from 'react';
export default () => <h1>About us</h1>;


Không cần phải cấu hình thêm. Chỉ cần thả một tệp tin thư mục pages/ và bộ định tuyến Next.js sẽ lo phần còn lại. Chúng tôi vẫn thích sự đơn giản này với routing. Nhưng khi việc sử dụng framework tăng lên, thì các developers cúng muốn xây dựng các giao diện khác nhau với sự linh hoạt hơn.

Các developers đã yêu cầu hỗ trợ cải thiện việc xác định layouts (bố cục), nhúng các thành phần giao diện(UI) như layouts và linh hoạt hơn trong việc xác định trạng thái tải và lỗi. Đây không phải là điều dễ dàng để trang bị thêm vào bộ định tuyến Next.js hiện có.

Mọi phần của framework phải được thiết kế xung quanh bộ định tuyến. Chuyển trang, tìm nạp dữ liệu, lưu vào bộ nhớ đệm, thay đổi và xác thực lại dữ liệu, phát trực tuyến, định dạng nội dung, v.v.

Để làm cho bộ định tuyến của chúng tôi tương thích với phát trực tuyến và giải quyết các yêu cầu này để hỗ trợ tốt hơn cho các layouts, chúng tôi bắt đầu xây dựng một phiên bản mới của bộ định tuyến.

Đây là kết quả sau khi chúng tôi phát hành lần đầu Layouts RFC (Request for Comment) của chúng tôi.

// New: App Router ✨
// app/layout.js
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}

// app/page.js
export default function Page() {
return <h1>Hello, Next.js!</h1>;
}

Quan trọng hơn những gì bạn thấy ở đây là những gì bạn không thấy. Bộ định tuyến mới này (có thể được áp dụng từng phần thông qua thư mục app/) có kiến trúc hoàn toàn khác, được xây dựng trên nền tảng của React Server Component và Suspense.

Nền tảng này đã cho phép chúng tôi loại bỏ các API cụ thể cho Next.js ban đầu được phát triển để mở rộng các nguyên tắc cơ bản React. Ví dụ: bạn không còn phải sử dụng tệp _app tùy chỉnh nữa để tùy chỉnh layouts chung toàn cục:

// Pages Router
// pages/_app.js

// "global layout" này bao quanh tất cả các đường dẫn.
// Không có cách nào để kết hợp các thành phần bố cục khác
// và bạn không thể lấy dữ liệu toàn cầu từ tệp này.
// data from this file.
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}

Với Pages Router, việc kết hợp layouts không thể được thực hiện và việc lấy dữ liệu không thể được đặt cùng với component. Với App Router mới, điều này đã được hỗ trợ.

// New: App Router ✨
// app/layout.js
//
// Bố cục gốc được chia sẻ cho toàn bộ ứng dụng
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}

// app/dashboard/layout.js
//
// Các bố cục có thể được lồng nhau và kết hợp.
export default function DashboardLayout({ children }) {
return (
<section>
<h1>Dashboard</h1>
{children}
</section>
);
}

Với Pages Router, _document được sử dụng để tùy chỉnh payload ban đầu từ máy chủ.

// Pages Router
// pages/_document.js


// Tệp này cho phép bạn tùy chỉnh các thẻ <html> và <body> cho yêu cầu từ máy chủ,
// nhưng thay vì viết các phần tử HTML, nó thêm các tính năng cụ thể cho framework.
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}

Với App Router, bạn không cần phải nhập , và từ Next.js nữa. Thay vào đó, bạn chỉ cần sử dụng React.

// New: App Router ✨
// app/layout.js
//
// The root layout is shared for the entire application
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}

Việc xây dựng một bộ định tuyến hệ thống tệp tin mới cũng là thời điểm thích hợp để giải quyết nhiều yêu cầu tính năng liên quan khác liên quan quan đến hệ thống định tuyến của chúng tôi. Ví dụ:

  • Trước đây, bạn chỉ có thể import global stylesheets từ các gói npm bên ngoài (giống component libraries) trong _app.js. Đây là một trải nghiệm không lý tưởng dành cho developer. Với App Router, bạn có import(và định vị) bất kỳ tệp CSS nào trong bất kỳ component nào.
  • Trước đây, việc kích hoạt kết xuất phía máy chủ với Next.js (thông qua getServerSideProps) có nghĩa là tương tác với ứng dụng của bạn bị chặn cho đến khi toàn bộ trang web được kích hoạt. Với App Router, chúng tôi đã tái cấu trúc kiến trúc để tích hợp sâu với React Suspense, nghĩa là chúng tôi có thể kích hoạt lựa chọn một phần của trang mà không chặn các thành phần khác trong giao diện người dùng khỏi việc tương tác. Nội dung có thể được truyền trực tiếp ngay lập tức từ máy chủ, cải thiện hiệu suất tải của một trang.
Bộ định tuyến là cốt lõi giúp Next.js hoạt động. Nhưng vấn đề không phải là về bản thân bộ định tuyến, mà là cách nó tích hợp các phần còn lại của framework — chẳng hạn như tìm nạp dữ liệu.

CÔNG TY TNHH TƯ VẤN TRUYỀN THÔNG MINARA
ĐỊA CHỈ:
- 182 Trần Bình Trọng, P.3, Q.5, Tp.HCM
- 27 Đường số 16, Trung Tâm Hành Chính Dĩ An, Bình Dương.
Điện thoại: 097.777.1060
Email: info@minara.vn
Website: www.minara.vn
 
Chỉnh sửa lần cuối:
Bạn phải đăng nhập hoặc đăng ký để phản hồi tại đây.
Bên trên