Web/NextJs

[ Next.js - DeepDive ] -미들웨어 ( Middlewares )

https://nextjs.org/docs/advanced-features/middleware Advanced Features: Middleware | Next.js Learn how to use Middleware to run code before a request is completed. nextjs.org 미들웨어는 request가 완료되기 전에 실행시킬 코드에 대해 정의할 수 있습니다. 그리고 우리는 이를 활용하여 들어오는 request에 대해 response를 덮어쓸 수도, redirecting할 수도, header를 추가할 수도 그리고 cookie를 설정할 수도 있게 됩니다. 그리고 이 미들웨어는 캐시된 파일 이전에 돌아갑니다. 그래서 우리가 static한 파일과 페이지를 만들 떄, 이미 인증..

Next.js - _document와 _app에 대하여

Next.js에는 두 가지 중요한 기본 페이지가 있습니다. 뱌로 _document와 _app입니다. _document와 _app은 페이지에 공통적으로 적용될 내용을 작성하곤 하는데, 둘이 정확히 어떻게 다른지와 어떤 내용을 작성해야 하는지에 대해 정리해 보겠습니다. App페이지 _app은 서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트로, 페이지에 적용할 공통 레이아웃의 역할을 합니다. 규칙 1. Component 속성값은 서버에 요청한 페이지가 됩니다. (Ex http://localhost:3000/home에 접속하면, Component는 home컴포넌트를 가리킵니다.) 2. pageProps는 getInitialProps, getStaticProps, getServerSideProps중 하나를..

Next.js - Advanced Custom app + next-redux-wrapper를 활용한 data pre-rendering

이번에는 최상위 컴포넌트에서 데이터를 랜더링 시키고 하위 컴포넌트에서 이를 재사용할 수 없을까에 대한 궁긍즘으로 조사를 시작했습니다. 먼저 참교한 공식문서를 알려드리겠습니다. https://github.com/kirill-konshin/next-redux-wrapper GitHub - kirill-konshin/next-redux-wrapper: Redux wrapper for Next.js Redux wrapper for Next.js. Contribute to kirill-konshin/next-redux-wrapper development by creating an account on GitHub. github.com 기본적으로 next-redux-wrapper를 사용하였습니다. 코드 // page..

Next.js - Dynamic Routes ( TODO )