일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
- 백준
- 타입스크립트
- 블록체인
- CSS
- JavaScript
- 웹
- k8s
- AWS
- kubernetes
- next.js
- 리액트
- 컴퓨터공학
- 쿠버네티스
- es6
- 알고리즘
- BFS
- HTML
- 솔리디티
- 파이썬
- 이더리움
- 이슈
- docker
- node.js
- 자바스크립트
- 프론트엔드
- 가상화
- TypeScript
- react
- 백엔드
- 클라우드
- Today
- Total
목록next.js (5)
즐겁게, 코드
Next.js가 페이지를 생성하는 방법에는 static generation과 server-side rendering 방식이 있음은 알고 계실 것입니다. 이 중 static generation은 항상 정적인 데이터만을 다루는 것처럼 보일 수 있는데, 꼭 그렇지만은 않습니다. 오늘은 아마 많은 분들이 모르실 수 있는 Incremental Static Generation에 대해 다뤄 보겠습니다. Incremental Static Re-Generation (ISR) getStaticProps 함수를 활용한 static generation 방식은 언제나 빌드 시점 에 페이지를 생성하지만, ISR 방식은 일정 주기마다 데이터의 최신 여부를 검사하고 업데이트된 데이터로 페이지를 다시 생성합니다. export asyn..
Next.js에는 두 가지 중요한 기본 페이지가 있는데요, 바로 _document와 _app 입니다. _document와 _app에는 페이지에 공통적으로 적용될 내용을 작성하곤 하는데, 둘이 정확히 어떻게 다른지와 어떤 내용을 작성해야 하는지에 대해 정리해 보겠습니다. 📝 App 페이지 _app은 서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트로, 페이지에 적용할 공통 레이아웃의 역할을 합니다. 🎯 주요 사용 목적 모든 컴포넌트에 공통으로 적용할 속성 관리 function MyApp({ Component, pageProps }) { return } export default MyApp ⚙️ 규칙 1. Component 속성값은 서버에 요청한 페이지가 됩니다. (Ex. http://localhost..
바벨 파일 세팅과 _document.tsx만 저렇게 주어진 템플릿대로 구성하면 ServerStyleSheet 설정을 적용할 수 있는데요, 이러면 서버에서 문서를 내려받을 때 스타일이 적용된 문서를 내려받음으로써 렌더링 이전에 styled-components를 통한 스타일이 적용되지 않는 문제를 방지할 수 있습니다. 처음 보면 어려울 수도 있고, 템플릿이 외워서 칠만큼 간단하지도 않은 만큼 이번 기회에 블로그에 메모해두려 합니다. 1. 의존성 패키지 설치 npm i styled-components babel-plugin-styled-components npm i -D @types/styled-components 2. .babelrc 파일을 루트 폴더에 생성한 후, 다음과 같이 작성한다. { "presets..
넥스트(Next.js)는 기본적으로 모든 페이지를 미리 렌더링합니다. 미리 렌더링을 해두면 SEO에도 유리하고 더 나은 성능을 얻을 수 있는데요, 넥스트에는 두 가지 사전 렌더링 방법이 존재합니다. 1. 정적 생성 - HTML 페이지를 미리 렌더링해두고 요청에 따라 제공합니다. 2. 서버 사이드 렌더링 - 페이지가 요청되는 시점에 서버에서 렌더링을 수행하고 결과물을 제공합니다. 별도의 외부 데이터가 필요하지 않다면 정적 생성 방식으로 미리 렌더링된 페이지를 제공합니다. 그러나 외부 데이터를 필요로 하는 경우에는 서버 사이드 렌더링을 통해 페이지를 제공하는데요, 오늘은 넥스트에서 어떻게 외부 데이터를 다룰 수 있는지 알아보도록 하겠습니다. getServerSideProps getServerSideProps..
리액트에서는 react-router-dom 라이브러리를 통해 페이지간 라우팅을 구현할 수 있었습니다. 그러나 넥스트(Next.js) 에서는 pages 폴더 안에 컴포넌트를 생성하면 자동으로 경로가 설정되게 됩니다. /.next /pages ㄴ-- index.jsx ㄴ-- tomato.jsx /public /styles 이렇게 pages 폴더 안에 index 와 tomato 라는 컴포넌트가 있으면 별도의 라우팅 없이 /tomato 라는 경로를 사용할 수 있게 됩니다. (* 경로명은 export되는 컴포넌트 이름이 아닌 파일명을 기준으로 합니다.) 정적 라우팅 정적 라우팅은 사전에 지정된 주소로 이동하는 방법입니다. react-router-dom 처럼 넥스트에서도 Link 컴포넌트를 사용해 주소를 이동할 수..