Next.js(App router)로 구현한 블로그입니다.
App router로 migrate 할 때 참고한 문서입니다.
-
App router migration
- NEXT.JS Docs: migrating-from-pages-to-app
- DISQUIET: Next.js와 ContentLayer로 MDX 블로그 만들기(다소 문법적 오류 있음)
왜 App router로 이전하였는가?
- 가장 큰 이유는 Page router의 기능을 모두 이해한 상황 속에서 App router가 stable해졌기 때문입니다.
- Client/Server 컴포넌트로의 변경과 getStaticProps/getStaticParams 등의 API가 default화되어 더욱 사용이 간편해졌습니다.
- 더 이상 정적 라우팅을 위한 함수들을 일일이 import하지 않아도 돼 코드가 매우 간결해지고 직관적이게 변했습니다.
- 또한 폴더 단위의 라우팅도 기존 난잡하던 directory를 직관적으로 바꿔주었습니다.
- 또한 정확한 이유를 파악하지 못했으나 getStaticParams로 블로그 글들을 slug로 뿌려주는 함수에서 불필요한 페이지 데이터 뻥튀기(?)로 large-page-data 워닝이 지속적으로 뜨는 문제도 App router로 이전하면서 사라졌습니다...
- 굉장히 만족스럽습니다!
Next.js의 메인테이너인 Lee Robinson의 블로그를 토대로 만든 블로그입니다.
- Framework: Next.js
- Database: Postgres
- Authentication: NextAuth.js
- Deployment: Vercel
- Styling: Tailwind CSS
- Analytics: Vercel Analytics
보다 자세한 셋업 방법은 leerob.io/README.md를 참고하기 바랍니다.
완료 목록
- Contentlayer를 제거하고 node.js fs 모듈로 로컬 파일을 직접 가져오는 방식을 채택했습니다. 해당 마이그레이션에 관한 글은 여기를 참고해주세요.
- Vercel/Postgres를 활용해 views 관리
- 의존성 미니멀리즘: 불필요한 의존성 제거
To Do List
- 이전 글 / 다음 글 제작 필요
- 동영상 포맷 교체 필요
좋아요 기능댓글 utterance 제작 필요
| / | /post | /post/[postName] |
|---|---|---|
|
|
|
모바일 스크린 기준으로 스타일링 중입니다.
완료 목록
블로그 / 메모 카테고리 분리 완료- 메모 카테고리 아이폰 메모장 디자인으로 제작 중(웹 사이즈 반응형 필요)
MDX 내부 이미지 Next.js Image 컴포넌트로 최적화 완료- MDX 스타일링 완료(각 포스트 페이지 전체 배경색 하얀색으로 통일시키는 법 연구 필요)
- body > {main} > content 컨텐츠를 감싸는 Main 컴포넌트(클라이언트 컴포넌트) 생성해 반응형 배경색 적용
- 네비게이션바 상단 고정 및 조건부 불투명화 / 푸터 하단 고정 및 html, body 최소 높이 설정
To Do List
- 이전 글 / 다음 글 제작 필요
- 동영상 포맷 바꿔야함
- 좋아요 기능 및 블로그 이용자 수 기능 제작 필요
- SEO, Lighthouse 최적화 필요
- 자기소개 페이지 구성 필요
- 정적 배포 필요(Vercel? S3?)
우선순위 낮은 것들
- 블로그 대문 제작 필요
- 댓글 utterance 제작 필요
| page.tsx | posts/[...slugs].tsx |
|---|---|
|
|
모바일 스크린 기준으로 스타일링 중입니다.
완료 목록
- 블로그 / 메모 카테고리 분리 완료
- 메모 카테고리 아이폰 메모장 디자인으로 제작 중(웹 사이즈 반응형 필요)
- MDX 내부 이미지 Next.js Image 컴포넌트로 최적화 완료
To Do List
- MDX 스타일링 완료(각 포스트 페이지 전체 배경색 하얀색으로 통일시키는 법 연구 필요)
- 이전 글 / 다음 글 제작 필요
- 좋아요 기능 및 블로그 이용자 수 기능 제작 필요
- SEO, Lighthouse 최적화 필요
- 자기소개 페이지 구성 필요
- 좀 더 예쁜 MDX 스타일링 레퍼런스 찾아보기..
- 정적 배포 필요(Vercel? S3?)
우선순위 낮은 것들
- 블로그 대문 제작 필요
- 댓글 utterance 제작 필요
| page.tsx | posts/[...slugs].tsx |
|---|---|
|
|
모바일 스크린 기준으로 스타일링 중입니다.
- 블로그 / 메모 카테고리 분리 필요
- 메모 카테고리 아이폰 메모장 디자인으로 제작 예정
- Next.js Image 컴포넌트 MDX 코드 내에서 정적 렌더링 필요
- nested route 페이지 내 MDX 스타일링 필요
- 블로그 대문 제작 필요
- 댓글 utterance 제작 필요
- 이전 글 / 다음 글 제작 필요
등등..
| page.tsx | posts/[...slugs].tsx |
|---|---|
|
|
가장 기초적인 코드 베이스 작성을 완료했습니다.
| index.tsx | posts/[id].tsx |
|---|---|
|
|