Routing, hay định tuyến, là quá trình quyết định cách ứng dụng phản hồi yêu cầu của người dùng đến một URL cụ thể. Khi người dùng nhấp vào liên kết, nhập URL vào trình duyệt hoặc thực hiện hành động thay đổi URL hiện tại, cơ chế routing sẽ quyết định nội dung hoặc component nào sẽ hiển thị trên trang.
Tại sao lại cần App Router?
Trong khi Pages Router, với cấu trúc thư mục pages quen thuộc, đã phục vụ tốt cho việc routing trong các phiên bản trước của Next.js, App Router ra đời như một giải pháp cho những đòi hỏi ngày càng cao của ứng dụng web hiện đại.
Thay vì pages, App Router sử dụng thư mục app để định nghĩa các route và layout.
File layout.js/tsx
Là component bao bọc bên ngoài component page.js/tsx, định nghĩa layout chung cho một nhóm route con.
Hỗ trợ khai báo metadata cho từng route con.
Giúp tái sử dụng layout và logic chung cho nhiều route.
File page.js/tsx
Đại diện cho một route cụ thể, là component chính được hiển thị cho route tương ứng.
app/not-found.js/tsx
Xử lý trường hợp không tìm thấy route (404 Not Found).
app/error.js/tsx
Xử lý lỗi xảy ra trong quá trình render.
app/loading.js/tsx
Hiển thị component loading trong quá trình chuyển trang, khi nội dung đang được tải từ server.
Ví dụ
Dưới đây là example tạo App Router trong NextJs 14
Dựa vào ví dụ bài trước, bạn mở file layout.tsx và thêm danh sách hyperlink như sau:
//..
import Link from 'next/link';
//....
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<ul>
<li><Link href={'/'}>Home Page</Link></li>
<li><Link href={'/about'}>About us</Link></li>
<li><Link href={'/this-page-not-exist'}>This page Does not exist</Link></li>
</ul>
{children}
<BootstrapClient />
</body>
</html>
);
}Tạo file Create not-found.tsx. Trang này sẽ hiển thị nếu bạn cố mở 1 route mà chưa định nghĩa trong web application
//File path: src/app/not-found.tsx
export default function Page() {
return (
<>
<hr /><h1>404 Page not found</h1><hr />
</>
)
}
export default function AboutUs(){
return (
<main>
<h1>About us</h1>
<ul className="list-group">
<li className="list-group-item">An item</li>
<li className="list-group-item">A second item</li>
<li className="list-group-item">A third item</li>
<li className="list-group-item">A fourth item</li>
<li className="list-group-item">And a fifth one</li>
</ul>
</main>
);
}export default function AboutLayout({ children }: { children: React.ReactNode }) {
return (
<div style={{ border: "2px solid blue", padding: "1rem" }}>
<h2>About Layout</h2>
{children}
</div>
);
}npm run devDynamic route
Dynamic Route cho phép bạn tạo ra các route linh hoạt, có thể thay đổi dựa trên một phần tử nào đó trong URL. Ví dụ, thay vì tạo route riêng cho mỗi bài viết trên blog (/posts/post-1, /posts/post-2, ...), bạn có thể dùng dynamic route để xử lý tất cả bài viết với chỉ một route (/posts/[slug]).
Slug là gì?
Slug is an unique part of an URL that provides information about a web page. You should keep them simple, human-readable to help out with SEO. It appears at the end part of the URL after the backslash (“/”). For example, how-to-learn is the slug of the URL https://tapascript.io/blog/how-to-learn.
Slug là phần tử động trong URL, thường được sử dụng để đại diện cho tiêu đề bài viết hoặc tên sản phẩm theo cách thân thiện với SEO. Slug thường được viết thường, không dấu và ngăn cách bởi dấu gạch ngang (-).
📁 app/
└──📂 blog/
├──{slug} /blog/how-to-sleep-well
├──..
└──📂 about/
├── about-us /about/about-us
├── form /about/form
Dưới đây là ví dụ tạo page blog nhận params từ dynamic routes
type BlogPostProps = {
params: {
slug: string;
};
};
const BlogPost: React.FC<BlogPostProps> = ({ params: { slug } }) => {
return (
<p className="text-2xl">
Showing the blog post for the slug <strong>{slug}</strong>
</p>
);
};
export default BlogPost;
Nhận xét
Đăng nhận xét