next.js로 블로그 프로젝트를 구성할 때 가장 많이 고민하게 되는 부분은 바로 마크다운의 처리입니다. next.js에서 서포트하는 mdx 관리 방식이 존재하긴 하지만 특성상 많은 요구사항을 수용하지 못합니다. 따라서 마크다운을 관리하는 가장 좋은 방법이라고 할만한게 정립이 되어있지 않은 상태로 contentlayer, velite, next-mdx-remote 정도의 솔루션들이 존재하는 형태입니다. 이번 글에서는 contentlayer에서 next-mdx-remote로 전환한 후기와 이유를 설명합니다. 왜 contentlayer에서 next-mdx-remote로 옮겨야 했는가? 커뮤니티 지원이 끊겨 버린지 약 1년이 되었다 contentlayer는 2024년 4월 13일 기준으로 10개월간 방치되어있..
😎next.js13 app router tailwind ts mui를 한번에 하는 starter kit이 있다? https://github.com/mui/material-ui/tree/master/examples/base-next-app-router-tailwind-ts 그것은 공식 레포의 examples이었구요 마침 app 라우터에서도 mui를 쓰고싶었는데 앱라우터도 스테이블이 된지 꽤..시간이 되었단 생각이 들어서 혹시 공식 레포에 보일러플레이트가 올라와있지 않을까? 하는 기대로 봤더니 있더라구요... 초기 환경 세팅은 고통스럽기만 하고 어... 해보면 쓸모가 있긴한데.. 고통스럽죠.. https://github.com/XionWCFM/vite-mui GitHub - XionWCFM/vite-mui:..
😋왜 필요할까? react-query가 제공해주는 SSR 환경에서 사용법을 보면서 한가지 의문이 들었습니다. react query가 제공해주는 캐싱, 리페칭 등등의 기능들이 매력적이긴한데... 사실 대부분의 기능은 캐싱 , revalidate 같은 부분은 next.js가 제공해주는 확장된 fetch 함수로도 충분하지 않나?? 그렇다면 next.js에서 react-query를 꽤나 복잡한 설정을 꾸역꾸역 설정하며 굳이굳이 사용할 필요성이 있을까? 라는 의문이 들었습니다. 물론 아직 제공되지 않는 부분도 많을 것 같습니다. 하지만 꼭 필요할까?라고 묻는다면 좀 애매할 것 같았습니다. 그러던 중 You Might Not Need React Query라는 글을 발견했어요 https://tkdodo.eu/blog..
😙Next.js에서 소셜로그인 구현하기 next-auth는 OAuth로그인을 쉽게 구현할 수 있도록 도와주는 라이브러리입니다. next-auth를 이용하면 Oauth를 간편하게 구현할 수 있습니다. 근데 처음하는 입장에서 Oauth 자체가 간편하지 않습니다. 그러한 모순을 견뎌내는 것이 Oauth의 길이니까.. 😚설치 방법 npm i next-auth 😐Google Oauth 설정하기 https://cloud.google.com/solutions/apis-and-applications?hl=ko 우선 구글 oauth 로그인을 위해서는 클라이언트 아이디가 필요합니다. 관련 설정 방법은 잘 포스팅 된 글들이 많이 존재합니다. http://blog.teamelysium.kr/nextjs-auth NextAut..
😉error.js https://nextjs.org/docs/app/api-reference/file-conventions/error File Conventions: error.js | Next.js Using App Router Features available in /app nextjs.org error.js는 예약된 이름의 파일입니다. 에러가 발생했을 때 표시되게 되는 파일이에요 사실 Next.js가 제공하는 문서에서 아주 잘 설명을 해주고 있습니다. 'use client'; // Error components must be Client Components import { useEffect } from 'react'; export default function Error({ error, reset,..
🐕 환경변수를 사용해야하는 이유 API key 노출되면 다른 사람에게 한무 즐기기를 당할 수도 있습니다. 굉장히 불쾌하고 API의 플랜에 따라서는 통장잔고가 남아나지 않을 수도 있겠죠..? 따라서 github에 API Key를 고대로 올려버리면 안됩니다. 잘 숨겨줘야 하는데 주로 환경변수를 많이 이용합니다. 물론 이러한 용도로만 사용되는 것은 아니고 개발, 테스트, 실제 서비스 등 여러 환경에서 애플리케이션을 배포하게 되기 때문에 각 환경에 따라서 다르게 설정해야하는 항목들을 환경변수로 관리합니다. 👻환경 변수를 등록하는 방법 root 디렉토리에 .env 혹은 .env.local 파일을 생성해줍니다. 이 안에는 키밸류 쌍의 형태로 값을 저장해줄 수 있습니다. 루트디렉토리에 생성한 .env.local 파일..
🐕 install npx create-next-app@latest # or yarn create next-app # or pnpm create next-app 자바스크립트를 사용하고자하는 경우엔 다음과 같이 명령어를 입력한다. project 이름을 입력하지 않는 이유는 입력하면 대충 앎 npx create-next-app@latest --typescript # or yarn create next-app --typescript # or pnpm create next-app --typescript 타입스크립트를 사용하고싶다면 --typescript를 붙여주면 된다. 👻라이브러리 설치 npm install react-icons --save $ npm install next-themes # or $ yarn a..
🐕 SSG는 뭐임... CSR, SSR은 어느정도 알고 있다고 생각하는데 Next.js 생태계로 들어가보면 처음 보는 단어들이 튀어나옵니다 SSG는 뭐고 ISR은 뭔가 싶어요 fullname으로 보면 이해가 쉬울 것 같아 찾아보니 SSG는 "Static Site Generation"을 뜻한다고 합니다. 직역하면 정적 사이트 생성으로 해석할 수 있겠네요 SSG와 ISR은 서버사이드 렌더링 환경에서 성능과 사용자 경험을 개선하는 데에 사용하는 일반적인 기술입니다. 웹사이트의 콘텐츠들을 빌드 시점에서 사전 구축하여 정적인 HTML 페이지의 형태로 사용자에게 제공하는 것 이라고 요약을 할 수가 있겠네요 SSG는 빌드 시점에 페이지를 생성해두는 것 정도로 이해하고 넘어가겠습니다. 엄밀한 개념은 다를 수 있지만요...
