4강 — 서버 액션과 배포
2024 DTC
| → / Space | 다음으로 |
| ← | 이전으로 |
| ↓ / ↑ | 같은 주제 안에서 단계 이동 |
| O | 전체 슬라이드 한눈에 보기 |
| F | 전체화면 |
아래쪽 화살표가 보이면 그 주제는 단계별로 이어집니다
| 1강 | 폴더가 주소, layout |
| 2강 | 서버 컴포넌트와 'use client' |
| 3강 | async fetch, loading, 캐싱 |
오늘은 데이터를 보내고 세상에 내놓습니다
API 주소를 만들려면
page.js 대신 route.js를 두면 API가 된다
app/api/posts/route.js
export async function GET() {
const posts = await db.getPosts();
return Response.json(posts);
}
export async function POST(request) {
const body = await request.json();
return Response.json({ ok: true });
}
page.js 와 route.js 를 함께 둘 수 없다폼을 서버에서 바로 처리하려면
'use client';
function Form() {
async function onSubmit(e) {
e.preventDefault();
await fetch('/api/posts', {
method: 'POST',
body: JSON.stringify({ title }),
});
}
}
글 하나 저장하는 데 몇 군데를 고쳐야 할까요?
export default function NewPost() {
async function create(formData) {
'use server';
const title = formData.get('title');
await db.insert({ title });
}
return (
<form action={create}>
<input name="title" />
<button>저장</button>
</form>
);
}
'use server'<form action={함수}> 로 연결formData.get() 으로 꺼낸다저장한 뒤 화면을 맞추려면
'use server';
await db.insert({ title });
3강의 캐시가 아직 남아 있으면?
'use server';
import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';
await db.insert({ title });
revalidatePath('/blog');
redirect('/blog');
검색과 공유에 잘 나오려면
app/layout.js
export const metadata = {
title: 'DTC 블로그',
description: '동아리 소식을 전합니다',
};
탭 제목 · 검색 결과 · 링크 미리보기
export async function generateMetadata(props) {
const post = await getPost(props.params.id);
return { title: post.title };
}
글마다 다른 제목
빠르게 보이게 하려면
import Image from 'next/image';
<Image
src="/logo.png"
width={200}
height={100}
alt="로고"
/>
크기 조절자동포맷 변환webp늦게 불러오기자동
import { Noto_Sans_KR } from 'next/font/google';
const noto = Noto_Sans_KR({ subsets: ['latin'] });
<body className={noto.className}>
인터넷에 올리려면
npm run build
Next.js를 만든 곳이 Vercel이라 설정이 필요 없습니다
.env.local 에 두고 깃허브에 올리지 않는다NEXT_PUBLIC_ 이 붙은 값은 브라우저까지 간다Next.js 4강 전체
| 1강 | 폴더가 주소, [id], layout |
| 2강 | 서버 컴포넌트, 'use client' |
| 3강 | async fetch, loading, error, 캐싱 |
| 4강 | route.js, 서버 액션, 메타데이터, 배포 |
배운 것을 전부 써봅시다
React 5강에서 만든 것을 Next로 옮겨도 좋습니다
수고하셨습니다