https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
Data Fetching: Server Actions and Mutations | Next.js
Learn how to handle form submissions and data mutations with Next.js.
nextjs.org
서버에서 실행되는 서버 컴포넌트와
브라우저 실행되는 브라우저 컴포넌트로 나뉘어진다.
각 컴포넌트 중에서 import해서 그대로 사용할 수 있는 서버에서 실행되는 함수다.
라고 생각하면 됨
https://www.youtube.com/watch?embeds_referring_euri=https%3A%2F%2Flopunko.notion.site%2F&source_ve_path=Mjg2NjQsMTY0NTAz&v=dDpZfOQBMaU&feature=youtu.be
최상단에
'use server' 로 붙어있음
이 파일의 코드들은
서버에서 동작하게 되는 것임
api를 자동으로 다 뚫어줌
- Server Action 사용 예시
- fetch + REST API
- Server Action
기존에 만들어 둔 route.ts를 수정한다.
import { NextResponse } from "next/server";
const DB = [
{
id: 1,
name: "Alice",
},
{
id: 2,
name: "Jun",
},
{
id: 3,
name: "Bob",
},
];
export async function GET(request: Request) {
return NextResponse.json({
users: DB,
});
}
1.fetch + REST API
예를들어
http://localhost:3000/api/users?name=David
으로 이름이 David인 유저를 검색하는 api를 만들고 싶다.
import { NextResponse } from "next/server";
const DB = [
{
id: 1,
name: "Alice",
},
{
id: 2,
name: "Jun",
},
{
id: 3,
name: "Bob",
},
];
export async function GET(request: Request) {
const searchParams = new URL(request.url).searchParams;
const name = searchParams.get("name") as string;
return NextResponse.json({
users: DB.filter((user) => user.name.includes(name)),
});
}
이렇게 api를 만들 수 있다.
그리고 검색한 유저를 표시하는 users페이지를 만들어서
"use client";
import { useEffect, useState } from "react";
export default function UsersPage() {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch(`/api/users?name=${"Jun"}`)
.then((res) => res.json())
.then((data) => {
setUsers(data.users);
});
}, []);
return (
<main>
{users.map((user) => (
<p key={user.id}>{user.name}</p>
))}
</main>
);
}
표시가능하다.
2. Server Action
기존에 사용하던 api -> user-> route.ts의 내용을 복사하여 만든다.
"use server";
export async function searchUsers(name: string) {
const DB = [
{
id: 1,
name: "Alice",
},
{
id: 2,
name: "Jun",
},
{
id: 3,
name: "Bob",
},
];
// name 으로 필터링해서 리턴하는 함수
return DB.filter((user) => user.name.includes(name));
}
users-> page.tsx 에서 searchUser함수를 import 해서 사용하면 된다.
"use client";
import { useEffect, useState } from "react";
import { searchUsers } from "../actions/user-actions";
export default function UsersPage() {
const [users, setUsers] = useState([]);
// use server action
useEffect(() => {
searchUsers("Bob").then((data) => setUsers(data));
}, []);
return (
<main>
{users.map((user) => (
<p key={user.id}>{user.name}</p>
))}
</main>
);
}
예시 1과 같이 동일하게 작동한다.
더 간단한 방법이라 이 방법을 강좌에서 사용할듯하다.
metaData?
Next.js는 SEO와 웹 공유성을 향상시키기 위해 어플리케이션의 메타데이터 (예: HTML head 요소 내의 메타 및 링크 태그)를 정의하는 데 사용할 수 있는 메타데이터 API를 가지고 있습니다.
제일 상위 page.tsx에서 예제 만들어봄
import { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
export const metadata: Metadata = {
title: "Next.js Tutorial",
description: "Next.js 튜토리얼 배우기",
};
export default function Home() {
return (
<main>
Home
<Link href="/dashboard">Go To Dashboard</Link>
</main>
);
}
title와 meta 데이터가 변경됨을 확인 가능하다.
