시키는 대로 안하는 사람의 질문입니다(app route, redirect)

[이주형]

app route가 안정화 됐다고해서 한 번 고집부려봤는데

```
import { connectDB } from "@/util/database";
import { NextResponse } from "next/server";
interface FormDataType {
    title: string;
    content: string;
}
export async function POST(request: Request) {
    const formData = await request.formData();</pre>
    const title = formData.get("title");
    const content = formData.get("content");</pre>
    if (!title || !content) {
        return NextResponse.json({ status: "500", content: "다 채워" });
     }
    const data: FormDataType = {
        title: formData.get("title") as string,
        content: formData.get("content") as string,
    };
    try {
        const db = (await connectDB).db("forum");
        let result = await db.collection("post").insertOne(data);
        const newUrl = new URL("/list", request.url).toString();
        return NextResponse.redirect(newUrl, 302);
    } catch (err) {
        return NextResponse.json({ status: 500, content: `db주금 ${err}` });
    }
}
```

처음에 request.body가 안나와서 1시간 날리고 (requset.formData)

redirect가 안되서 1시간동안 docs에 코박고 있었는데 대충 찾아보니
네트워크에서 리다이렉트 status가 307로 돌아오고있더라구요 그래서
`return NextResponse.redirect(newUrl, 302)` 이렇게 강제로 302로 제마음대로 바꿔버렸는데 맞는 방법일까요 마음이 찝찝하네요

[codingapple]

import { redirect } from 'next/navigation'
 
export async function GET(request: Request) {
  redirect('https://nextjs.org/')
}
문서에는 이런거 쓰라고 나와있군요

[이주형]

직접 답변을 받으니 연예인한테 연락 온 느낌이 나네요 선생님 
강의 결제한 보람을 느끼는 순간입니다.

GET에서 redirect는 잘 되는듯 한데 애가 약간 멍청해서 POST 메서드에서 쓰면 list 페이지를 그대로 응답을 줘서
list페이지가 GET이 아니라 POST요청으로 들어오는듯 합니다. 

영어 실력이 미천해서 제대로 읽은게 맞나싶긴한데
그냥 이번 강의까지만 하고 app router 버리겠읍니다

[codingapple]

NextResponse.redirect(new URL("/list", request.url)) 해봅시다

[이주형]

두 번의 답변이라니 송구스럽고 황송하고 기쁘고 행복합니다.

아쉽지만 위와 같은 방법으로 했는데도 안됐습니다.

app router에서 아무도 이렇게 안쓰길래 어제 종일 찾아보니 개발자 트위터에서 답을 찾았습니다.

Nextresponse.redirect 메서드는 middleware에 연결할 때 사용하라고 만들어 놓았다고 하더군요

POST 요청으로 들어왔을 때 middleware 호출 시 GET으로 바뀌지 문제들 때문에 307이 기본값으로 설정했다고 합니다.

그래서 middleware에서 Nextresponse.redirect하면 정상적으로 되는 듯 합니다. 해보진 않았지만요

그리고 미들웨어 없이 하려면 그냥 클라이언트 쪽에서 response값으로 핸들링 하라고 스택오버플로우 선생님들이 추천하시는데

한 달 전에도 같은 질문이 올라왔는데 해결 못했다고 하는거 보니 app router에서는 마땅한 해결책이 없나봅니다.

[codingapple]

그렇군요 어쩔수없나봅니다

[윤수호]

선생님 저도 다른 분이 알려주셔서 해결했는데

import { connectDB } from "@/util/database";
import { NextRequest, NextResponse } from "next/server";

interface FormDataType {
title: string;
content: string;
}

export async function POST(req: NextRequest) {
console.log(req);
const formData = await req.formData();
const title = formData.get("title");
const content = formData.get("content");
if (!title || !content) {
return NextResponse.json({ status: "500", content: "다 채워" });
 }
const data: FormDataType = {
title: formData.get("title") as string,
content: formData.get("content") as string,
 };
let db = (await connectDB).db("forum2");
db.collection("post").insertOne(data);

return new Response("Hello, Next.js!", {
status: 303,
headers: {
Location: "/list",
 },
 });
}

이코드 참고하셔서 한번 해보십쇼 전 일단 됐습니다

[글쓴이]

글