Next13 작년 10월에 Next13이 업데이트 될 때, 다들 '다시 배워야한다.' '맨날 업데이트 된다.' 이랬던 것 같은데 미루고 미루다가 Next 13 베타를 써보고 느낀 점을 기록해보고자 작성하게 되었다. (근데 tailwind를 곁들인...) [only for IntelliJ] tailwind defaultStyle 버그 IntelliJ 에디터에서 tailwindcss의 autocomplete가 적용되지 않는 버그이다. 물론 자동완성이 되지 않더라도 스타일은 적용되지만, margin, padding, text 등에 대한 spacing도 다르기도 하고, 자동완성이 안되는 것 때문에 매번 공식문서를 방문하는 것도 쉽지않다. 구글링을 해도 마땅한 이유가 나오지 않다가 몇 번의 셀프 테스트케이스를 만..

말로만 듣던 EC2에 프로젝트를 Next 프로젝트를 배포하는 여정을 기록해보려고 합니다. 제 프로젝트는 의도치 않게 모노레포로 구성이 되어있었기 때문에 추후 포스팅할 Jenkins를 사용한 배포 자동화에 대한 고민이나, EC2 인스턴스에서 프로젝트를 세팅하는 과정에서 경로와 관련된 처리가 필요하답니다! Next 프로젝트를 배포해보는 건 이번이 처음이었는데요. 배포에 앞서서 로컬에서 빌드했을 때 무슨 차이가 있는지 비교해보는 과정부터 시작해보겠습니다. 1. Next의 build 파일에는 index.html이 없다. Next 빌드 결과 webpack 빌드 결과물 Next가 SSR을 지원하기에 요청이 들어오면 그때서 html을 만들어 보낸다는 건 개념적으로 알았지만, 결국 엔트리포인트를 어디로 잡아야할까에 대..

mp3나 mp4같은 파일을 정적으로 넣어두고 사용할 때, output 경로를 잘 설정해줘야한다. 이런 설정은 기본적으로 next.config.js에서 해줘야하는데 일반 React와는 다른 점이 있어서 공유해보려고 한다. module과 webpack 관련 설정 내용이므로 custom.d.ts와 next.config.js를 수정하면서 대응할 수 있다. 1. 태그 사용법 먼저, DOM에서 음성파일을 사용하려면 audio 태그를 사용하면 된다. const MusicPlayer = () => { const audioRef = useRef(null); return ( ); } export default MusicPlayer; audio의 src 안에 정적 경로를 넣어주면 되는데, 상태로 관리하지 않고 ref를 사용..

릴리즈 목적의 프로젝트를 진행하다보면 검색 엔진 등 이점을 받아보기 위해 SSR을 도입하고 싶고, 그 중에서도 Next로 마이그레이션을 하고 싶어할 것 같다. 미루고 미루고 미루다가 이제야 Next로 마이그레이션 하면서 고민했던 프로세스를 공유해보려고 한다. 내 경우에는 CRA로 생성한 프로젝트가 아니라 웹팩으로 한땀한땀 바벨로 폴리필 해줬던 프로젝트여서 더 힘들었던 것 같은데 이 글이 나와 같이 막막한 사람들에게 도움이 되었으면 좋겠다는 마음이다. 0. react-dom 프로젝트 구성 먼저 마이그레이션 전 스택과 폴더 구조를 설명해야할 것 같다. 가장 신경써야할 부분이 번들러 관련된 부분일 것 같다. - 번들러: webpack - 상태관리: react-redux, reduxjs/toolkit - 비동기..

CRA 배포하듯이 Next.js 환경에서 배포할 수 있다면 얼마나 좋을까? 야심차게 배포한 프로젝트가 빈 화면만 나왔었다. 놀란 마음에 개발자 도구를 살펴보니 빌드된 프로젝트의 index.html에서 불러오는 js 파일이나 스타일시트, img 태그의 소스 등 많은 요소의 경로가 문제였다. 당연히 콘솔에선 404오류가 났었다, url 앞에 호스트 주소를 써주는 등의 prefix 작업을 해줘야하는 것. 열심히 구글링해보니 이런 문제는 context를 뿌려줘서 해결할 수 있었다. 1. Prefix 적용 📂 asset prefix 설정 next.config.js 파일에 assetPrefix 속성을 추가한다. 이 설정은 css 설정 중 경로와 관련된 속성값 앞에 해당 문자열을 붙여준다. /** @type {imp..

요즘 Next.js랑 three.js를 공부해보고 있는데, 대지를 그려주거나 할 때 window 객체에 접근할 일이 자주 있습니다. 하지만 Next.js는 SSR을 기본으로 하기 때문에 서버에서 렌더링 하는 시점에선 전역변수 window를 가져올 수 없습니다. 방법은 두 가지가 있습니다. 1. dynamic 사용 import styles from "../styles/Home.module.css"; import dynamic from "next/dynamic"; const ThreeJSSetting = dynamic(() => import("../components/Example"), {ssr: false}); export default function Home() { return ( HELLO THREE..