Mục lục  Giới thiệu  Thiết lập dự án  Hiểu cấu trúc thư mục  Liệt kê tất cả các bài đăng trên blog  Hiển thị một bài đăng trên blog  Sử dụng Loading UI và Streaming trong Next.js  Phần kết luận  Người giới thiệu  1. Giới thiệu  Xin chào!  Trong hướng dẫn hôm nay, chúng ta đang bắt đầu hành trình tạo một blog đơn giản nhưng mạnh mẽ bằng Next.js.  Cho dù bạn là người mới sử dụng Next.js hay bạn chỉ đang tìm cách cải thiện một số nguyên tắc cơ bản, thì hướng dẫn này đều phù hợp với bạn.  Chúng ta sẽ không chỉ xử lý cách thiết lập một dự án mà còn đề cập đến cấu trúc thư mục, kết xuất phía máy chủ, v.v.  Bạn có thể tìm thấy kho lưu trữ đầy đủ  tại đây  Hãy đi sâu vào ngay!  2. Thiết lập Dự án  Bước 1: Tạo ứng dụng  Để bắt đầu, hãy sử dụng lệnh sau để thiết lập ứng dụng Next.js của chúng tôi:   npx create-next-app@latest blog-example  Sau khi hoàn tất, hãy điều hướng đến dự án mới được tạo:   cd blog-example  Bước 2: Khởi động máy chủ phát triển  Mặc dù tôi đang sử dụng   trong hướng dẫn này, vui lòng sử dụng   hoặc   : yarn npm pnpm   yarn dev  Bây giờ, hãy truy cập   nơi bạn sẽ tìm thấy trang mẫu Next.js mặc định. http://localhost:3000  3. Hiểu cấu trúc thư mục  Tại thời điểm này, thật hữu ích khi hiểu cấu trúc của ứng dụng Next.js của chúng tôi. Vui lòng tham khảo hình ảnh sau đây để biết cách trình bày trực quan về bố cục thư mục.   4. Liệt kê tất cả các bài đăng trên blog  4.1. Lộ trình API  Bên trong   , chúng tôi sẽ thiết lập API giả cho các bài đăng trên blog. Tại đây,   chỉ định rằng chúng tôi muốn xác thực lại dữ liệu của mình sau mỗi 60 giây. /app/api/posts/route.js next: { revalidate: 60 }   Xác thực lại dữ liệu  Xác thực lại là quá trình xóa Bộ nhớ cache dữ liệu và tìm nạp lại dữ liệu mới nhất. Điều này hữu ích khi dữ liệu của bạn thay đổi và bạn muốn đảm bảo rằng bạn hiển thị thông tin mới nhất.  Dữ liệu được lưu trong bộ nhớ cache có thể được xác thực lại theo hai cách:    : Tự động xác thực lại dữ liệu sau một khoảng thời gian nhất định đã trôi qua. Điều này hữu ích cho dữ liệu thay đổi không thường xuyên và độ mới không quá quan trọng. Xác thực lại dựa trên thời gian    : Xác thực lại dữ liệu theo cách thủ công dựa trên một sự kiện (ví dụ: gửi biểu mẫu). Xác thực lại theo yêu cầu có thể sử dụng cách tiếp cận dựa trên thẻ hoặc dựa trên đường dẫn để xác thực lại các nhóm dữ liệu cùng một lúc. Điều này hữu ích khi bạn muốn đảm bảo dữ liệu mới nhất được hiển thị càng sớm càng tốt (ví dụ: khi nội dung từ CMS không đầu của bạn được cập nhật). Xác thực lại theo yêu cầu   Xác nhận lại dựa trên thời gian  Để xác thực lại dữ liệu tại một khoảng thời gian đã định, bạn có thể sử dụng tùy chọn     để đặt thời gian tồn tại của bộ nhớ cache của tài nguyên (tính bằng giây). fetch next.revalidate  Đây là một ví dụ:   import { NextResponse } from 'next/server' export async function GET() { const res = await fetch('https://dummyjson.com/posts', { next: { revalidate: 60 }, }); const data = await res.json(); return NextResponse.json(data); }  4.2. Hiển thị các bài viết  Hãy tạo một thành phần,   , tìm nạp và hiển thị các bài đăng từ máy chủ của chúng ta. Mặc dù tôi đã tạo kiểu cho nó ở mức tối thiểu, nhưng hãy thoải mái biến nó thành nhạc jazz! PostsPage   export default async function PostsPage() { const res = await fetch('http://localhost:3000/api/posts'); const { posts } = await res.json(); return ( // Styles are for readability; customize as you wish! <div> <h1>All Blog Posts</h1> <hr style={{ width: '220px' }} /> <div style={{ paddingTop: '40px' }}> {posts.map(post => ( <article key={post.id}> <h2>{post.title}</h2> <p style={{ paddingBottom: '30px'}}>{post.body}</p> </article> ))} </div> </div> ); }  Cho đến nay, bạn sẽ thấy một danh sách các bài viết.   5. Hiển thị một bài đăng trên blog  5.1. Liên kết bài viết  Để làm cho mỗi tiêu đề bài đăng có thể nhấp được, chúng tôi sẽ thêm thành phần   từ Next.js: Link   import Link from 'next/link'; export default async function PostsPage() { // ... rest of the code return ( <div> // ... rest of the code <div style={{ paddingTop: '40px' }}> {posts.map(post => ( <article key={post.id}> <Link href={`posts/${post.id}`}> <h2>{post.title}</h2> </Link> <p style={{ paddingBottom: '30px'}}>{post.body}</p> </article> ))} </div> </div> ); }  5.2. Định tuyến API cho một bài đăng  Trong lộ trình API Next.js, chúng tôi đang tìm nạp các bài đăng cụ thể dựa trên ID của chúng:   import { NextResponse } from 'next/server' export async function GET(request, { params }) { const { id } = params; const res = await fetch(`https://dummyjson.com/posts/${id}`, { next: {revalidate: 60} }); const post = await res.json(); return NextResponse.json({ post }); }  5.3. Hiển thị một bài đăng  Để hiển thị các bài đăng riêng lẻ, điều quan trọng là phải hiểu sự khác biệt giữa các thành phần máy chủ và máy khách trong Next.js.  Thành phần đã cho,   , sử dụng tính năng tìm nạp dữ liệu phía máy khách. SinglePost  Về cơ bản, điều này có nghĩa là dữ liệu được tìm nạp trên máy khách sau khi trang được hiển thị. Nó cho phép tương tác phong phú mà không làm giảm hiệu suất. Bạn có thể đọc thêm về điều này trong   . tài liệu Next.js trên React Essentials   Thành phần máy khách  Thành phần máy khách cho phép bạn thêm tính tương tác phía máy khách vào ứng dụng của mình. Trong Next.js, chúng được   trên máy chủ và ngậm nước trên máy khách. Bạn có thể coi Thành phần Máy khách giống như cách các thành phần trong   luôn hoạt động. kết xuất trước Bộ định tuyến Trang   'use client' import Link from 'next/link'; import { useEffect, useState } from 'react'; export default function SinglePost({params}) { const [post, setPost] = useState(null); const fetchPost = async (id) => { const res = await fetch(`http://localhost:3000/api/posts/${id}`); const {post} = await res.json(); post && setPost(post); } useEffect(() => { fetchPost(params.id); }, []) return ( <div style={{ paddingTop: '20px', paddingLeft: '20px' }}> <Link href='/'>Back to home</Link> <div style={{ paddingTop: '50px' }}> <article> <h1 style={{ paddingBottom: '10px' }}>{post?.title}</h1> {post?.tags.map((tag, index) => <span style={{ fontWeight: 'lighter' }} key={index}>{tag} | </span>)} <br/> <p style={{ paddingTop: '10px' }}>{post?.body}</p> </article> </div> </div> ) }  Bây giờ, bạn sẽ có thể xem chi tiết bài viết. Xin vui lòng, thứ lỗi cho việc thiếu phong cách!   6. Sử dụng Loading UI và Streaming trong Next.js    Để nâng cao trải nghiệm người dùng, hãy xem xét thêm một thành phần tải. Next.js cung cấp giải pháp tích hợp sẵn với Loading UI và Streaming. Nó hỗ trợ hiển thị một công cụ quay vòng tải cho đến khi nội dung của bạn sẵn sàng. Tìm hiểu sâu hơn với   . Mẹo: hướng dẫn chính thức này về Đang tải giao diện người dùng và Truyền trực tuyến  Ví dụ:   // You can add any UI inside Loading, including a Skeleton. export default function Loading() { return <LoadingSkeleton />}  7. Kết luận  Xây dựng ứng dụng Next.js có thể vừa thú vị vừa thú vị.  Chúng tôi đã học cách thiết lập một dự án, quản lý cấu trúc thư mục của chúng tôi, liệt kê các bài đăng trên blog, giới thiệu các bài đăng riêng lẻ và thậm chí chạm vào trạng thái tải.  Với sự phát triển nhanh chóng của Next.js trong cộng đồng phát triển web, các kỹ năng học được ở đây là vô giá.  Mở rộng dựa trên nền tảng này, khám phá nhiều tính năng hơn và viết mã vui vẻ!  8. Tài liệu tham khảo   Tài liệu Next.js chính thức  Đối với dữ liệu của bài viết, tôi đã sử dụng  DummyJson  Để xây dựng bài viết, tôi đã sử dụng  StackEdit  Cảm ơn bạn đã dành thời gian và cống hiến cho việc học. Phản hồi của bạn là vô cùng quý giá. Nếu bạn có bất kỳ bổ sung hoặc chỉnh sửa nào cho bài đăng này, vui lòng liên hệ.  Kết nối với tôi trên: cộng đồng    dev.to @leandro_nnz  cộng đồng    hackernoon.com @leandronnz  Twitter  @digpollution  Chúc mừng!

Read My Stories

Portfolio

Hire Me

Buy Me a Coffee

Next.Js 13 Parallel Routes: A Comprehensive Guide

Mastering JavaScript Shorthands

PostgreSQL or MySQL: What Should I Choose for My Full-Stack Project?

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

Hướng dẫn từng bước để xây dựng một Blog Next.js đơn giản 13

About Author

BÌNH LUẬN

chuyên mục

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI

Related Stories

94 Stories To Learn About John Locke

184 Stories To Learn About Psychology

178 Stories To Learn About Essay

189 Stories To Learn About Reading Books

94 Stories To Learn About John Locke

184 Stories To Learn About Psychology

178 Stories To Learn About Essay

189 Stories To Learn About Reading Books

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps