Web/NextJs

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 )

Next.js - with Redux thunk

이번에는 Next.js에서 전역으로 상태 관리를 하는법이 React와 다른거 같길래 너무너무 궁금해서 한번 조사하고 예시코드를 작성해보도록 하겠다. 참고는 https://github.com/vercel/next.js/tree/canary/examples/with-redux-thunk GitHub - vercel/next.js: The React Framework The React Framework. Contribute to vercel/next.js development by creating an account on GitHub. github.com 또한 공식 문서 https://github.com/kirill-konshin/next-redux-wrapper next-redux-wrapper를 참고하였..

Next.js - Static File Serving

Next.js는 정적 파일을 제공합니다. 'public'아래에 있는 폴더를 이용하면 됩니다. 'public'폴더 아래에 있는 파일들은 '/'을 통해 접근 가능합니다. import type { ReactElement } from "react"; import type { NextPageWithLayout } from "../_app"; import styles from "../../scss-styles/HomePage.module.scss"; import Image from "next/image"; import profilePic from "../../public/happy.jpg"; const Home: NextPageWithLayout = () => { return ( My Homepage Welcome..