1. Server Action ?

form의 mutation(생성, 업데이트, 삭제)을 할 수 있게 해주는 Next.js의 기능입니다. 서버 액션을 사용하면, API 엔드포인트를 생성하지 않고도 컴포넌트 내에서 비동기 함수를 직접 정의할 수 있습니다.

2. Server Action 정의 방법

server action을 사용 하기 위해서는 next.config.js에 아래와 같이 serverActions 옵션을 true로 설정 해주어야합니다.

module.exports = {
  experimental: {
    serverActions: true,
  },
};

함수 상단에 use server를 선언하고, async 키워드를 붙이면 서버에서 동작하는 Server Function이 됩니다. 한 파일 내에 여러 Server Function를 정의하는 경우 파일 최상단에 use server를 한번만 선언하면됩니다.

export default function App() {
	async function DeletePost() {
			'use server"
			//...
	}
//...
}

'use server'
async function DeletePost() {
		//...
}

async function UploadPost() {
		//...
}

3. Server Action 사용하기

Server Action 사용을 위해 로컬 데이터베이스 사용을 위해 라이브러리를 설치하였습니다.

npm install -D better-sqlite3

1 ) 데이터 베이스 생성

db.js

const sql = require("better-sqlite3");
const db = sql("posts.db");

const dummyPosts = [
  {
    title:
      "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    content:
      "quia et suscipit\\nsuscipit recusandae consequuntur expedita et cum\\nreprehenderit molestiae ut ut quas totam\\nnostrum rerum est autem sunt rem eveniet architecto",
  },
  {
    title: "qui est esse",
    content:
      "est rerum tempore vitae\\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\\nqui aperiam non debitis possimus qui neque nisi nulla",
  },
  {
    title: "ea molestias quasi exercitationem repellat qui ipsa sit aut",
    content:
      "et iusto sed quo iure\\nvoluptatem occaecati omnis eligendi aut ad\\nvoluptatem doloribus vel accusantium quis pariatur\\nmolestiae porro eius odio et labore et velit aut",
  },
  {
    title: "eum et est occaecati",
    content:
      "ullam et saepe reiciendis voluptatem adipisci\\nsit amet autem assumenda provident rerum culpa\\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\\nquis sunt voluptatem rerum illo velit",
  },
  {
    title: "nesciunt quas odio",
    content:
      "repudiandae veniam quaerat sunt sed\\nalias aut fugiat sit autem sed est\\nvoluptatem omnis possimus esse voluptatibus quis\\nest aut tenetur dolor neque",
  },
];

db.prepare(
  `
   CREATE TABLE IF NOT EXISTS posts (
       id INTEGER PRIMARY KEY AUTOINCREMENT,
       title TEXT NOT NULL,
			 content TEXT NOT NULL
    )
`
).run();

async function initData() {
  const stmt = db.prepare(`
      INSERT INTO posts VALUES (
         null,
         @title,
         @content
      )
   `);

  for (const post of dummyPosts) {
    stmt.run(post);
  }
}

initData();