Xây dựng Next.js TODO App Serverless Zero-Dependency

Bài viết này hướng dẫn xây dựng ứng dụng TODO dựa trên Next.js serverless. Chúng tôi cố gắng tối giản nhất: không database connection, không dependency thêm ngoài Next.js, không buttons. Bên cạnh đó, minimalism cool và clean, tôi thích vì tôi là developer lười :)

Tại sao tránh database connections?

Next.js cho phép frontend developer phát triển full-stack. Serverless functions đóng vai trò quan trọng đơn giản hóa backend development. Như bạn biết, serverless functions không "thích" database connections do bản chất stateless. Xem ví dụ 1 và ví dụ 2 về vấn đề connections trong serverless functions.

REST là giải pháp

REST cho phép client-server giao tiếp không cần session info. Tính stateless và bản chất đơn giản làm REST trở thành giao thức communication hoàn hảo cho serverless. Chúng ta sẽ truy cập Upstash Redis qua REST.

Tech Stack

• Frontend: Next.js
• Backend: Vercel Functions
• Database: Upstash Redis với REST API

Xem demo: https://nextjs-todo-zeta.vercel.app/

Xem code: GitHub

Thiết lập Project

Tạo Next.js app: npx create-next-app

Tạo Upstash Redis database ở region AWS-US-EAST-1, copy REST URL và token.

Project là single-page app với 3 API endpoints:

• pages/api/list.js: Liệt kê TODO items.
• pages/api/add.js: Thêm TODO item.
• pages/api/remove.js: Xóa TODO item.

Mã nguồn

Thêm pages/api/list.js:

export default async (req, res) => {
  const token = "REPLACE_YOUR_TOKEN";
  const url = "https://REPLACE_YOUR_ENDPOINT/lrange/todo/0/100?_token=" + token;
  return fetch(url)
    .then((r) => r.json())
    .then((data) => {
      let result = JSON.stringify(data.result);
      return res.status(200).json(result);
    });
};

Thêm pages/api/add.js:

export default async (req, res) => {
  if (!req.query.todo) {
    return res.status(400).send("todo parameter required.");
  }
  let todo = encodeURI(req.query.todo);
  const token = "REPLACE_YOUR_TOKEN";
  const url = "https://REPLACE_YOUR_ENDPOINT/lpush/todo/" + todo + "?_token=" + token;
  return fetch(url)
    .then((r) => r.json())
    .then((data) => {
      let result = JSON.stringify(data.result);
      return res.status(200).json(result);
    });
};

Thêm pages/api/remove.js:

export default async (req, res) => {
  if (!req.query.todo) {
    return res.status(400).send("todo parameter required.");
  }
  let todo = encodeURI(req.query.todo);
  const token = "REPLACE_YOUR_TOKEN";
  const url = "https://REPLACE_YOUR_ENDPOINT/lrem/todo/1/" + todo + "?_token=" + token;
  return fetch(url)
    .then((r) => r.json())
    .then((data) => {
      let result = JSON.stringify(data.result);
      return res.status(200).json(result);
    });
};

Cập nhật pages/index.js (code React cơ bản dùng hooks, 3 methods: addTodo, removeTodo, loadTodos tương tác với APIs).

Cuối cùng cập nhật styles/Home.module.css tại đây.

Chạy và Deploy

Chạy local: npm run dev. Nếu ổn, deploy bằng vercel trong folder project. Vercel tạo serverless functions cho API functions. Region mặc định Vercel là US-EAST-1, nên tạo database cùng region.

LƯU Ý

• An toàn hơn: giữ database token trong Vercel environment variable.
• Tốt cho performance: serverless function và Redis database cùng region.
• Có thể dùng Redis clients thay REST API. Nhưng như đã nói, database connections gây issues trong serverless. Cũng không thấy chênh lệch performance lớn giữa Upstash REST API và native API.