đồng thời cung cấp nhiều tính năng tiên tiến như Server-Side Rendering (SSR). Static Site Generation (SSG), code splitting và hot reloading.
Ngoài ra, Next.js cũng hỗ trợ nhiều thư viện và công nghệ phổ biến trong cộng đồng React, như Redux, TypeScript, styled-components và nhiều hơn nữa.
Với các tính năng và lợi ích mà nó mang lại, Next.js đã trở thành một lựa chọn phổ biến cho các ứng dụng web React của các công ty lớn và nhỏ trên toàn thế giới.
Tại sao trang web của chúng ta nên có 404 error page
Trang 404 error page là một trang thông báo lỗi hiển thị khi người dùng truy cập vào một URL không tồn tại trên trang web của bạn.
Việc có trang 404 error page sẽ giúp cải thiện trải nghiệm người dùng bằng cách cho họ biết rằng trang họ đang cố truy cập không tồn tại, thay vì bị chuyển hướng đến trang lỗi hoặc trang rỗng.
Ngoài ra, việc có một trang 404 error page cũng giúp tăng khả năng tìm kiếm của trang web của bạn. Điều này có nghĩa là, nếu một trang không tồn tại được xác định bởi các công cụ tìm kiếm
Ví dụ tạo một trang 404 error trong Next Js
1.Tạo một trang 404.js trong thư mục pages của dự án Next.js của bạn
2.Trong trang 404.js, bạn có thể tạo giao diện của trang 404 error bằng cách sử dụng các thành phần UI của Next.js hoặc các thư viện CSS như Tailwind CSS.
import Link from 'next/link'
const Custom404 = () => {
return (
<div className="flex flex-col items-center justify-center h-screen">
<h1 className="text-4xl font-bold text-gray-900 mb-4"><span class="ez-toc-section" id="Oops_This_page_cant_be_found"></span>Oops! This page can’t be found.<span class="ez-toc-section-end"></span></h1>
<p className="text-lg text-gray-600 mb-8">It looks like nothing was found at <a href="https://nodemy.vn/hieu-arrow-function-va-this-trong-javascript-tao-ra-nhung-ham-manh-me-voi-cu-phap-ngan-gon-huong-dan-day-du-cho-nguoi-moi-bat-dau-important/">this</a> location. Maybe try one of the links below or a search?</p>
<Link href="/">
<a className="text-lg text-blue-600 hover:text-blue-800">Go back home</a>
</Link>
</div>
)
}
export default Custom404
3.Bạn cũng có thể tùy chỉnh trang 404 error page theo ý muốn của bạn, bao gồm cả việc thêm các tùy chọn điều hướng hoặc các liên kết trang web liên quan.
4.Cập nhật tệp package.json trong dự án của bạn với các thông tin meta như tên trang, mô tả, từ khóa, vv. Điều này giúp trang 404 của bạn trở nên tốt hơn cho SEO và giúp người dùng tìm kiếm trang web của bạn dễ dàng hơn.
Kết luận và bài viết có liên quan
Bài viết có liên quan: Tổng quan về Firebase và cách tích hợp vào Next.js: Hướng dẫn từ A đến Z dễ hiểu cho người mớ bắt đầu ( important ) Tổng quan về Tailwind CSS và cách tích hợp vào Next.js: Hướng dẫn từ A đến Z dễ tiếp cận với người mới ( important ) Tổng quan về Tailwind CSS và cách tích hợp vào Next.js: Hướng dẫn từ A đến Z dễ tiếp cận với người mới ( important )
