IT/Next.js

[Next.js] React Query로 SSR 구현하기

Next.js에서 getServerSideProps를 활용하여 서버에서 API호출을 한 결과값을 HTML 파일에 포함시켜서 받아올 수 있다. type Todo = { title: string; completed: boolean; }; type Props = { todos: Todo[]; }; export default function Home({ todos }: Props) { return ( {todos.map(({ title, completed }) => ( {title} {completed && 완료} ))} ); } export const getServerSideProps: GetServerSideProps = async () => { const res = await fetch('https://j..

[Next.js] Next.js에서 mongoose 연동해서 API 만들기

Next.js에서 API 만들기 Next.js에서 pages/api 디렉토리에서 파일/디렉토리 이름으로 API endpoint를 나타낼 수 있다. pages/api/user.ts export default function handler(req, res) { if (req.method === 'GET') { // GET 요청 처리 } else if (req.method === 'POST') { // POST 요청 처리 } } /user로 들어온 요청이 pages/api/user.ts에서 처리된다. next-connect 라이브러리를 사용하면 마치 Express.js에서처럼 미들웨어의 형태로 코드를 작성할 수 있다. import { NextApiRequest, NextApiResponse } from 'ne..

[Next.js] Next.js에서 Prop `className` did not match 경고가 뜨는 이유

이 글은 Prop `props이름` did not match. 로 시작하는 Warning에 관한 내용입니다. 또한 Next.js에서 styled-components를 사용하면서 겪은 여러 가지 문제를 다룹니다. _document.tsx(jsx) Next.js에서 styled-components를 사용할 때 _document를 따로 설정해서 SSR될 때 CSS가 head에 주입되도록 해야 한다. 만약 따로 설정하지 않는다면, styled-components가 적용되지 않은 상태로 렌더링될 수 있다. import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'; import { ServerStyleSheet } ..