프론트 개발을 하다보면 일부 예전 버전의 브라우저들을 지원해야 하는 경우가 있습니다. Next.js 에서도 이와 관련된 기능을 제공하고 있습니다. package.json 에 browserslist 작성 package.json 에 아래와 같이 browserslist 를 작성합니다. { ... "browserslist": [ "chrome 64" ] ... } chrome 64 는 예시이며 지원하고 싶은 브라우저 범위에 맞게 수정하시면 됩니다. browserslist 에 대한 자세한 내용은 여기를 참고해주세요. 위와 같이 작성하면 Next.js 에서는 빌드 시 해당 브라우저 버전의 범위에 맞춰 코드를 트랜스파일링 합니다. 하지만 여기까지만 작성하면 next.js 자체는 package.json 의 browse..

Next.js 를 실행할 때 마다 최초 한번 특정 로직을 실행해야 하는 경우가 있었습니다. 구동할 때 마다 최초 한번이라는 말은 즉, 코드가 수정되어 git merge 된 이유를 포함한 여러가지 이유로 인해 애플리케이션을 재기동 할 때를 말합니다. 해당 부분을 Next.js 에서 처리하는게 가능할까? 라는 생각과 함께 Next.js 문서를 읽어보던 도중에 Next.js 에서 제공하는 기능 중 하나인 Instrumentation 을 발견하였습니다. Instrumentation 이 무엇인가? Next.js 레포지토리의 루트 경로 또는 src 폴더 사용시에는 src 경로에 instrumentation.ts 라는 파일을 생성 후 이 파일 안에서 register 라는 함수를 export 해놓으면 Next.js 가..

안녕하세요. 루루개발자입니다. 최근 Next.js 에서 렌더링이 진행되는 과정 및 원리 등에 대한 질문을 받았는데 제 스스로가 만족스러운 답변을 하지 못했습니다. 단순히 서버 사이드에서 한번 렌더링 하고 그 뒤에 클라이언트에서 다시 렌더링 되는 정도로만 알고 있었는데, 이번 기회에 한번 정리를 해보고자 합니다. Next.js 렌더링 과정 Next.js 의 렌더링 과정에 대해 정리해보겠습니다. Pre-Rendering Next.js 는 서버 사이드에서 먼저 페이지를 Pre-Rendering 합니다. 좀 더 정확히 말하면 서버 사이드에서 ReactDOMServer.renderToString 라는 함수를 사용하여 페이지에 대한 html 문서를 문자열로 가져오는 것이라고 할 수 있습니다. 해당 html 문서에는..

안녕하세요! 루루개발자입니다. 이번 글에서는 최근 Next.js 의 Typescript 환경에서 local, development, production 환경을 셋팅한 과정을 공유드리고자 합니다. 왜 local, development, production 환경을 셋팅해야 하나? 로컬에서 구동할 때, 개발 서버에서 구동할 때, 운영 서버에서 구동할 때 통신해야 할 API Base Url 이나 콜백 받아야할 Url 등을 다르게 처리되어야 하는 경우가 종종 발생하곤 합니다. 이럴 때 config 파일이 각 환경에 맞게 분리되어 있다면 원하는 config 파일로 구동하여 각 환경마다 다른 값으로 처리가 가능하기 때문에 local, development, production 환경을 셋팅하는 것은 중요합니다. .en..