[Next.js] Assets, Metadata, and CSS Assets, Metadata, and CSS 설명 Next.js 는 built-in CSS를 제공 Assets Next.js는 public 폴더 아래로 이미지 같은 정적 요소를 제어. public 폴더 아래의 파일들은 애플리케이션 … read more
[Next.js] Create a Next.js App Create a Next.js App 생성 npx create-next-app or npx create-next-app@latest --ts // 현재 폴더에 생성 npx create-next-app@latest --ts . 실행 npm run dev 새로운 페이지 생성 pages 폴더에 새로 … read more
[Next.js] Dynamic Routes Dynamic Routes 기본개념 각 파일에 대한 동적경로를 지원 사용 라이브러리 Render Markdown 설치 npm install remark remark-html Formatting the Date 설치 npm install date-fns /components/date.js import { parseISO, format } from "date-fns … read more
[Next.js] getStaticPaths getStaticPaths 기본개념 dynamic route를 이용한다면, build 시에 HTML을 생성하기 위해 path list를 정의해야할 필요가 있음 이런 경우에 getStaticPaths를 사용 Next.js는 getStaticPaths에 정의된 모든 … read more
[Next.js] getStaticProps getStaticProps 기본개념 async 함수인 getStaticProps 함수를 export하면 Next.js는 getStaticProps에 의해 return된 props를 이용해 build 시에 pre-rendering 함 export async function getStaticProps(context) { return { props: {}, // props로 page component에 전달될 것입니다. } } 사용처 사 … read more
[Next.js] Navigate Between Pages Navigate Between Pages 설명 Link 컴포넌트는 Next.js 앱의 페이지 간에 client-side-navigation을 가능하게 함 자바스크립트를 통해서 페이지 전환을 하기 때문에 브라우 … read more
[Next.js] next router 참고 Vercel next/router router.push 사용법 url: UrlObject | String - 이동하고자 하는URL as: UrlObject | String - (Optional) path에 대한 decorator options: object - (Optional) 아래 설정 가능 scroll: boolean - 페이지 이동 후 스크롤을 … read more
[Next.js] Pre-rendering and Data Fetching Pre-rendering and Data Fetching Pre-rendering Next.js는 브라우저가 로드 되면 모든 페이지를 pre-render한다. 생성된 HTML은 최소한의 필요한 자바스크립트 코드가 포함되어 있어 화 … read more
[Next.js] TypeScript with Next TypeScript 설치 npm install --save-dev typescript @types/react @types/node 확장자 js -> tsx read more