đồ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.
Đôi chút về Serverless Function trong Next.js
Thay vào đó, các hàm này được chạy trên các nền tảng đám mây như AWS Lambda, Azure Functions, Google Cloud Functions, và Firebase Functions.
Sử dụng Serverless Function trong Next.js sẽ giúp cho bạn tạo ra ứng dụng web nhanh hơn, dễ bảo trì hơn, và tiết kiệm chi phí thuê máy chủ vật lý.
Ví dụ đơn giản về cách sử dụng Serverless Function trong Next.js
Đây là một ví dụ đơn giản về cách sử dụng Serverless Function trong Next.js để truy xuất dữ liệu từ một API bên ngoài và hiển thị nó trên trang web:
Đầu tiên, ta sẽ tạo một file tên là get-posts.js trong thư mục /pages/api với nội dung như sau:
import fetch from 'isomorphic-unfetch';
export default <a href="https://nodemy.vn/di-sau-vao-async-await-trong-javascript-huong-dan-tu-co-ban-den-nang-cao-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">async</a> function getPosts(req, res) {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const posts = await response.json();
res.status(200).json(posts);
}
Trong đoạn code trên, ta đã import fetch từ package isomorphic-unfetch để thực hiện việc lấy dữ liệu từ API. Tiếp theo, ta đã tạo một function có tên getPosts và đưa vào hai tham số là req và res, tương ứng với request và response.
Trong function này, ta đã gọi đến API https://jsonplaceholder.typicode.com/posts để lấy danh sách các bài đăng và trả về response dưới dạng JSON.
Sau đó, ta sẽ import Serverless Function này vào một trang web bằng cách tạo một component có tên là PostList trong thư mục /components với nội dung như sau:
import React, { <a href="https://nodemy.vn/doi-chut-ve-usestate-trong-react-hooks/">useState</a>, <a href="https://nodemy.vn/useeffect-va-cach-su-dung-useeffect-reacthooks/">useEffect</a> } from 'react';
function PostList() {
const [posts, setPosts] = useState([]);
useEffect(() => {
async function fetchPosts() {
const response = await fetch('/api/get-posts');
const posts = await response.json();
setPosts(posts);
}
fetchPosts();
}, []);
return (
<div>
<h1><span class="ez-toc-section" id="Posts"></span>Posts<span class="ez-toc-section-end"></span></h1>
<ul>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}
export default PostList;
Cuối cùng, ta chỉ cần import component PostList vào một trang web bằng cách sử dụng component này trong hàm render của trang đó:
import React from 'react';
import PostList from '../components/PostList';
function Home() {
return <PostList />;
}
export default Home;
Kết luận và bài viết có liên quan
Bài viết có liên quan: Cách tương tác với data Base trong Next.js dễ tiếp cận với người mới bắt đầu ( important ) Gợi ý dùng Next.js để xây dựng ứng dụng Blog dễ hiểu cho người mới ( important ) Cách sử dụng Style component trong Next.js để tạo giao diện đẹp và dễ bảo trì cho người mới bắt đầu ( important )
