콘텐츠로 이동

Next.js

  1. SDK를 설치합니다.

    터미널 창
    npm install @spacepost/node
  2. 키를 .env.local에 추가합니다. NEXT_PUBLIC_ 접두사를 붙이지 마세요.

    .env.local
    SPACEPOST_API_KEY=sp_live_YOUR_API_KEY
  3. 라우트 핸들러를 만듭니다.

    app/api/send/route.ts
    import { SpacePost } from "@spacepost/node";
    const spacepost = new SpacePost(process.env.SPACEPOST_API_KEY);
    export async function POST(request: Request) {
    const { email } = await request.json();
    const { data, error } = await spacepost.emails.send({
    from: "Acme <hello@acme.com>",
    to: [email],
    subject: "Hello from Next.js",
    html: "<p>Sent from a route handler.</p>",
    });
    if (error) return Response.json({ error }, { status: error.statusCode ?? 500 });
    return Response.json(data);
    }
app/actions.ts
"use server";
import { SpacePost } from "@spacepost/node";
const spacepost = new SpacePost(process.env.SPACEPOST_API_KEY);
export async function subscribe(formData: FormData) {
const email = String(formData.get("email"));
const { error } = await spacepost.emails.send({
from: "Acme <hello@acme.com>",
to: email,
subject: "You're on the list",
text: "Thanks for subscribing.",
});
if (error) throw new Error(error.message);
}

@react-email/render를 설치한 다음 react로 컴포넌트를 전달합니다.

app/api/welcome/route.ts
import { SpacePost } from "@spacepost/node";
import WelcomeEmail from "@/emails/welcome";
const spacepost = new SpacePost();
export async function POST() {
const { data, error } = await spacepost.emails.send({
from: "Acme <hello@acme.com>",
to: "user@example.com",
subject: "Welcome",
react: <WelcomeEmail name="Ada" />,
});
return Response.json(error ?? data);
}