Xin chào mọi người lại là Slao đây
Sau đây chúng ta sẽ tiếp tục những gì còn dang dở ở bài viết trước nhé
Dưới đây là 1 số topic chúng ta thảo luận
How Can I Skip the Root Layout for Some Pages in Next.js?
How To Set Metadata Tags in App Router?
How To Set Metadata Dynamically for an App Router Page?
Can I Set Metadata in a Layout File?
Can I Use Contexts with App Router?
How Can I Skip the Root Layout for Some Pages in Next.js?
Một dự án Nextjs với rất nhiều layout files, về mặt kĩ thuật thì mỗi trang đều có thể có layout riêng. Tệp layout cao nhất bao bọc toàn bộ ứng dụng gọi là Root Layout.
Các Layout file cho phép bạn tái sử dụng lại component như là một phần bao bọc các Page. Thông thường nhất mỗi ứng dụng Nextjs sẽ có Root Layout bao gồm ứng dụng chính, menu, tiêu đề, hero image....
Giờ chúng ta sẽ đến với vấn đề chính. How Can I Skip the Root Layout for Some Pages in Next.js? Nextjs có một tính năng gọi là Route Groups cho phép bạn có nhiều Root layout. Có nghĩa là các thành phần khác nhau có bố cục khác nhau, điều này cũng có thể bỏ qua bất kỳ thành phần nào trong bố cục cho một số page nhất định
Một điều cần lưu ý là khi sử dụng route group bạn sẽ trigger tải toàn bộ trang. Đó là điều bạn sẽ gặp phải khi thay thế thành phần cao nhất của server component trong ứng dụng. Nó đơn giản nghĩa là bạn render một phần hoàn toàn mới trong ứng dụng đọc lập với thành phần còn lại của tất cả các trang
How To Set Metadata Tags in App Router?
Nextjs dễ dàng đặt metadataa cho ứng dụng và page. Điều duy nhất phải làm là xuất một đối tượng metadata từ bất kì layout hoặc page file nào của bnaj để đặt metadata cho layout/page đó
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Next.js Metadata Example',
description: 'Example of metadata in Next.js',
}
export default function MyPage() { ... }
How To Set Metadata Dynamically for an App Router Page?
Để tối ưu nhất cho SEO việc thiết lập metadata tĩnh không bao giờ là đủ. Vì dữ liệu sẽ là duy nhất cho hầu hết mọi trang và thậm chí được tải trong thời gian chạy từ server. Để đặt metadata động trong nextjs, có thể sử dụng chức năng generateMetadata
import type { Metadata } from 'next'
export async function generateMetadata(): Promise<Metadata> {
const data = await fetch('someUrl').then((res) => res.json())
return {
title: 'Next.js Dynamic Metadata Example',
description: data.pageDescription,
}
}
export default function MyPage() { ... }
Điều cần biết là chức năng tìm nạp trong nextjs theo mặc định bộ nhớ cache là duplicated requests. Đây là một hành vi chung không cụ thể cho metadata. Ngay cả các yêu cầu Server Component cũng bị cache khi mà fetch. Mặc dù nó có thể từ chối và thậm chí vô hiệu hóa tự động một số tính năng khi chức năng của nextjs được sử dụng
Can I Set Metadata in a Layout File?
Bạn có thể đặt metadata trong layout file, cả static và dynamically.
Can I Use Contexts with App Router?
Có thể sử dụng React Contexts với App Route trong Next. Bạn có thể đặt bối cảnh ở trong root Layout để có thể cung cấp cho các thành phần của Client Component. Context sẽ không available để sử dụng trong Server Component và sẽ không làm hỏng hành vi kết xuất (render) của Server Component