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

Mục lục

1. Giới thiệu
2. Thiết lập dự án
3. Hiểu cấu trúc thư mục
4. Liệt kê tất cả các bài đăng trên blog
5. Hiển thị một bài đăng trên blog
6. Sử dụng Loading UI và Streaming trong Next.js
7. Phần kết luận
8. 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 yarn trong hướng dẫn này, vui lòng sử dụng npm hoặc pnpm :

 yarn dev

Bây giờ, hãy truy cập http://localhost:3000 nơi bạn sẽ tìm thấy trang mẫu Next.js mặc định.

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 /app/api/posts/route.js , chúng tôi sẽ thiết lập API giả cho các bài đăng trên blog. Tại đây, next: { revalidate: 60 } 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.

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:

• Xác thực lại dựa trên thời gian : 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 theo yêu cầu : 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 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 fetch next.revalidate để đặ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).

Đâ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, PostsPage , 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!

 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 Link từ Next.js:

 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, SinglePost , sử dụng tính năng tìm nạp dữ liệu phía máy khách.

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 kết xuất trướ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 Bộ định tuyến Trang luôn hoạt động.

 '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

Mẹo: Để 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 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!