인프런 커뮤니티 질문&답변
작성한 질문수
[Next.js에 Private Route 관련문의]
해결된 질문
23.04.28 15:57 작성
·
705
1
안녕하세요. 강의 잘 보고 있습니다. 질문이 몇가지있어 문의드립니다.
1. Private Route 관련
로그인된 유저만 접근할 수 있는 페이지 라우팅 경로를 아래와 같이 만들어 볼려고 하는데
next-auth에 useSession, getServerSession 으로 페이지 마다 각각 접근 제한하는 방식 말고 app/my 폴더에서 하위에 모두 접근을 제한 하는 방식이 있는지 궁금하여 문의 드립니다.
app/my/profiles/page.tsx
app/my/membership/page.tsx
app/my/qna/page.tsx
2. API 공통 에러 처리 관련
API호출시 not-found.tsx를 사용해서 API 경로 404를 json으로 보내줄 수 있는지 궁금합니다.
그리고 app/api/test/route.ts 에서 각각 try catch로 익셉션을 체크 해서 http 500을 리턴하는 방식말고 middleware에서 공통으로 오류 처리를 할수 있는지 궁금합니다.
middleware.ts로 로그인 체크 하는 코드는 많이 검색이 되는데 공통으로 오류 처리는 검색이 딸려서 그런지 찾을수가 없네요.
답변 2
0
0
2023. 05. 06. 23:11
안녕하세요. 질문 감사합니다.
특정 라우팅 경로에 공통으로 똑같은 로직을 적용하고 싶을 때 template이나 layout을 활용하는 것으로 보입니다.(링크: https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#templates) 다만 app directory 관련 내용까지 직접 개발해보고 답변드리긴 힘든 상황이라, 공식 문서상 파악한 내용으로만 답변드립니다🙏 Next.js에서 이제 막 개발된 기능이다보니, 관련 로직을 어떤 식으로 어떤 파일에 넣는 것이 좋은지까지 정립이 된지는 모르겠네요. 직접 시도해보는 것이 가장 좋을 것 같습니다!
404 관련 -> 무슨 뜻인지 명확히 이해하지 못했습니다. 단순히 404 페이지로 이동하는 것이라면 next api response의 redirect 기능을 사용하면 될 것으로 보입니다.
기존의 handler를 감싸는 wrapper 함수에게 오류 처리를 맡기는 방법이 있습니다. 코드로 예를 들면
function mockAPI() { // 실패하거나 성공하는 mock API
const random = Math.random();
if (random > 0.5) return Promise.resolve('John Doe');
return Promise.reject();
}
async function handler(
req: NextApiRequest,
res: NextApiResponse<Data>
) {
const response = await mockAPI(); // 에러 처리는 wrapper에게 맡기고, API 호출
res.status(200).json({ name: response }); // 정상적으로 동작시, 200 응답
}
export default async function wrapper(
req: NextApiRequest,
res: NextApiResponse<Data>
) {
try {
await handler(req, res); // handler를 실행
} catch {
res.status(400).json({ name: 'something wrong' }); // 오류 발생시 에러 처리
}
}다음과 같습니다. 하지만 이것도 질문을 명확하게 이해한 것은 아니라 원하시는 답변인지는 모르겠습니다.
app directory 관련 내용이기도 하고 코드가 없는 줄글 문의라 답변이 만족스럽지 못할 수 있다는 점 양해부탁드립니다🥲 감사합니다.