React.lazy와 Suspense를 사용하면 코드 스플리팅을 하기 위해 state를 따로 선언하지 않고 간편하게 컴포넌트 코드 스플리팅을 할 수 있다고 한다. React.lazy > 컴포넌트를 렌더링 하는 시점에 > 비동기적으로 로딩할 수 있게 해주는 유틸 함수 Suspense 리액트 내장 컴포넌트 코드 스플리팅된 컴포넌트를 로딩하도록 발동 시킬 수 있고, 로딩이 끝나지 않았을 때 보여줄 UI를 설정할 수 있음 Suspense에서 fallback props를 통해 로딩 중에 보여 줄 JSX를 지정할 수 있습니다. Dynamic Import https://nextjs.org/docs/advanced-features/dynamic-import With suspense Full SSR support in concurrent mode is still a work-in-progress. 동시 모드에서 전체 SSR 지원은 아

이번에 next.js의 `` 에서 AVIF 포맷을 지원한다고 해서 Image 태그를 다시 한번 사용해봤다. AVIF 포맷 : 용량이 더 적은 파일 형식(.jpg, .png 같은 것) https://itigic.com/ko/heif-and-avif-image-photography-formats-differences/ Image 태그 사용 후기 https://nextjs.org/docs/api-reference/next/image 다른 도메인의 asset(image 등)을 가져올 때 https://nextjs.org/docs/messages/next-image-unconfigured-host Error: Image with src "https://cdn.inflearn.com/assets/brand/brand_logo.png" must use "width" and "height" properties or "layout='fill'"

Next.js middleware 간단하게 테스트 course/[id] 에 미들웨어를 만들기 id가 1이 아니면 404 화면을 띄우기 404 화면 컴포넌트 필요 \_middleware.ts 에선 리액트 컴포넌트 문법(jsx or tsx)를 사용할 수 없음 서버쪽 코드라고 생각하면 될 것 같다 console.log도 서버(node.js) 터미널에 찍힘 아직은 언제 어떻게 써야할지 지켜봐야겠다 완전히 MVC 패턴처럼 서버에서 코딩하는 느낌이다 https://velog.io/@gth1123/MVC-MVP-MVVM Next.js 공식 예제 코드 https://github.com/vercel/examples/tree/main/edge-functions 미들웨어에서 redirect를 해당 미들웨어가 포함된 라우터 폴더로 보내면 무한 루프에 빠짐 공식 사이트 에제 auth

getStaticProps vs. getServerSideProps getStaticProps "빌드 시에 딱 한 번"만 호출되고, 바로 static file로 빌드됩니다. 따라서, 이후 수정이 불가능합니다. SSG (Static Site Generation) 개념입니다. getServerSideProps "page가 요청받을때마다" 호출되어 pre-rendering합니다. SSR (Server Side Rendering) 개념입니다. pre-render가 꼭 필요한 동적 데이터가 있는 page에 사용하면 됩니다. 매 요청마다 호출되므로 성능은 getStaticProps에 뒤지지만, 내용을 언제든 동적으로 수정이 가능합니다. 고찰 getServerSideProps에선 hooks를 사용할 수 없다. fetch를 사용해서 데이터를 가져온 뒤 props를 return 한 것을 컴포넌트에서 가져오는 방식으로 사용해야 될 것 같다. 리덕스를

이번 next.js 12버전 업데이트에서 Babel 컴파일러에서 SWC(Rust) 컴파일러로 바뀌었다. TL;DR refresh, build 시간 비교 build time 11버전 : 1분 50초(빌드에 걸리는 총 시간) 12버전 : 1분 38초(빌드에 걸리는 총 시간) refresh time 11버전 : 강의 만들기 -> 강의 정보 : 5.41초 12버전 : 강의 만들기 -> 강의 정보 : 3.16초 Refresh 시간 비교 강의 만들기 페이지 -> 강의 정보 페이지 11버전 : 강의 만들기 -> 강의 정보 : 5.41초 12버전 : 강의 만들기 -

https://github.com/react-hook-form/react-hook-form/discussions/6961 https://github.com/react-hook-form/resolvers/issues/271 12.0.1 버전에선 에러가 안난다고 하니 버전을 다운시키고 빌드를 해봤다. npm i next@12.0.1 npm run build 성공적으로 빌드가 되었다. 고찰 이번 next.js를 12버전으로 올리기 위해 빌드를 하면서 우리 앱에서 부족한 점들을 많이 찾을 수 있었다. 그 동안 기술부채를 쌓아왔던 것에 대해 자각할 수 있는 좋은 기회였다. 12버전에서 build time과 refresh time을 측정하기 위해 build를 하면서 발생하는 오류들을 인지할 수 있었다. 모든 오류를 정석적으로 해결하진 않았지만 테스트코드와 CI/CD 이후 리팩터링 하면서 조금씩 해결해갈 예정이다.

https://stackoverflow.com/questions/69774152/failed-to-load-next-config-js/69781857 next.js를 버전 12로 올리고 실행하는데 위와 같은 에러가 발생했다. 에러를 검색해보니 node.js버전을 올리면 해결이 된다고 하는데 분명히 최신버전으로 node를 업데이트 했는데 오늘 다시 확인해보니 12.16으로 낮아져 있다 https://stackoverflow.com/questions/23940172/not-seeing-latest-version-when-updating-node-js-via-installer-msi-windows-7 where node로 노드 위치를 확인해보니 ![](https://images.velog.io/ima

Next.js version 12 업데이트 후 .server.js로 페이지 컴포넌트를 만들면 getServerSideProps, getStaticProps 둘다 필요없다고 하는 것 같은데 이것을 실험해보기 전에 getServerSideProps을 먼저 사용해봐야겠다는 생각이 들었다. 이번에 나현님의 PR에서 router에 shallow 옵션을 줄 수 있다는 것을 알게 됐는데 이것과 같이 사용해보려 한다. Pre-rendering and Data Fetching Two Forms of Pre-rendering Static Generation : getStaticProps ![](https://images.velog.io/images

Next.js 12 이번에 Next.js의 버전 12가 나온 것에 대해 알아보자. * Next.js 12 공식 영상 및 문서 * >https://youtu.be/dMBYI7pTR4Q https://nextjs.org/blog/next-12 Update today by running npm i next@latest. 주요 릴리즈 1. 러스트 컴파일러 최대 3배 까지 더 빠른 새로고침 최대 5배 까지 더 빠른 빌드 2. 미들웨어(베타) Next.js에서 완전 유연성 활성화 3. React 18 버전 지원 React 18 버전 다음 포스트에서 정리하자 Suspense 뿐만 아니라 Native Next.js APIs가 이제 지원된다. 뭔지 잘 모르겠다. 4. ``

최근까지 package.json에 있는 "dev": "NODE_OPTIONS='--inspect' next dev" 스크립트를 NODE_OPTIONS='--inspect' 없이 사용했었다. 이번에 이 환경변수를 설정하는 것이 어떤 의미가 있는지 알아보자. NODE_OPTIONS='--inspect'를 사용하지 않은 경우 NODE_OPTIONS='--inspect'를 사용한 경우 127.0.0.1:9229/d7d18bf3-9479-4a22-86b8-0c4c3f0c2e05 브라우저에 위 URL을 쳐보면 WebSockets request was expected 이라고 나온다. ws://127.0.0.1:9229/d7d18bf3-9479-4a22-86b8-0c4c3

delete the .next folder at the root of your project. 참고 문헌 https://stackoverflow.com/questions/67652612/chunkloaderror-loading-chunk-node-modules-next-dist-client-dev-noop-js-failed

인프런 노드버드 강의를 듣고 스타일드 컴포넌트를 적용했었는데 초반엔 SSR을 위한 추가적인 설정을 하는 부분이 없었다. 그래서 막상 개인프로젝트에 적용을 해보니 제대로 되지 않아서 구글 검색을 해봤는데 document와 babel을 설정해주는 부분이 있었다. 그래서 강의를 찾아보니 후반부에 이것과 관련된 강의가 있어서 그것을 보고 일단 따라하고 부족한 내용은 구글 검색을 하면서 보충하려 한다. 문제점 평소 리액트에서 쓰던데로 styled-components를 nextjs에서 사용을 했는데 페이지 이탈 후 복귀 시 css가 적용이 안되는 문제가 있음 무엇이 다른가? styled-components의 CSS가 서버사이드 렌더링에서 적용이 안되는 경우 있었다. 조치 next가 webpack, babel을 알아서 정해주는데 그것을 커스터 마이징을 할 수 있음 1. .babelrc 파일을 package.json과 같은 위치에 만들기 npm i b

pages 폴더 \_document : HTML, App container \_app : 공통의 레이아웃 index : home 컴포넌트 signup : /signup 에 해당하는 페이지 컴포넌트 \_document \_app 글로벌 CSS common header and footer 앱 공통으로 쓰이는 header나 footer를 어디에 넣어야 되나 했는데 AppLayout이란 컴포넌트를 만들어서 공통으로 쓰면 되는거였다 \app.tsx나 \document.tsx 중 어디에 넣어야 하나 생각하고 있었는데 구글 검색하니 좋은 방법이 나온다. 참고 문헌 Next.js의 기본 구조 정리 [Have a common header layout in nextjs](https://stackoverflow.com/questions/579