Next.js
1.[Next.js] Next.js 프로젝트 세팅
이번에 Next.js를 공부하면서 배운 개념과 지식을 정리해보려 합니다. 이번 글은 “왜 Next.js를 공부하는가?”, 프로젝트 세팅 등의 주제로 작성해보겠습니다. Next.js를 사용하고 계신가요? 🤔 Next.js를 사용 중이신가요? 그렇다면 왜 사용하시나요
2.[Next.js] Page Router 구조와 라우팅 방식 이해
이번 글에서는 Next.js의 Page Router 방식에 대해 공부하면서 정리하려고합니다. Page Router 구조, 라우팅 방식, a태그와 Link컴포넌트에 대해서 정리하였습니다.
3.[Next.js] Page Router에서 getLayout() 사용하는게 좋을까?
이번에 Next.js Page Router를 공부하면서 재밌는것을 알게 되어서 더 자세히 공부하고자 정리를 해볼려고합니다. 오늘의 주인공 : getLayout() getLayout을 언제 사용하고, 어떤 이유로 사용하는지 한번 알아봐야합니다.
4.[Next.js] async/await, Promise.all, Promise.allSettled
이번에는 async/await vs Promise.all vs Promise.allsettled에 대한 글을 작성해보았습니다.
5.[Next.js] middleware를 통한 mobile, desktop 분리 (리소스 38.7% 감소)
🖥️ Mobile, Desktop 분리 (userAgent, middleware) 리소스 38.7% 감소
6.Next.js에서 tanstack/react-query 도입기
💡 tanstack/react-query 사용이유 > 프로젝트를 진행하면서 Next.js에서 별도의 상태 관리 라이브러리를 도입할 필요가 있을까? 라는 고민을 정말 많이 했다.
7.SSR에서 유저 권한 라우팅 처리
오늘은 SSR 환경에서 유저 권한에 대한 분리했던 방식을 한번 작성해봤습니다.
8.swagger-typescript-api로 API 자동화 도입
swagger와 typescript만 있다면 자동화해서 생산성을 높여볼수있습니다!
9.Next.js Error Handling
다들 Next.js를 사용하면서 에러 처리를 어떤식으로 하시나요? - API 호출 중 요청 실패(4xx/5xx) - 네트워크/타임아웃 - 인증 만료(401) - 의도치 않은 런타임 에러(Type Error, 로직 오류 등)
10.코드 레벨로 보는 Next.js <Link/>
vercel/next.js 공식 깃허브로 보는 Link 컴포넌트 맛보기
11.knip 라이브러리 (사용 X 파일,의존성, export, Type) 정리
리팩토링을 하는 과정에서 가장 먼저 한것은 사용하지 않는 파일, 의존성, export, type을 정리했습니다. 그것을 정리하는데 도움이 되는 Knip을 소개합니다.
12.Next.js Middleware 똑똑하게 쓰는 법
Next.js middleware에 대해서 한번 정리를 진행했습니다.
13.Next.js loading.tsx 알아보기
Next.js App Router를 사용하다 보면 자연스럽게 loading.tsx를 사용하게 됩니다.저 역시 처음에는 “페이지 로딩 상태를 보여주는 파일” 정도로 이해하고 사용했습니다.그런데 실제로 프로젝트를 진행하다 보니 loading.tsx의 동작이 직관적이지 않다