Other articles

1. [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

2. [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

3. [Next.js] getStaticPaths

   getStaticPaths

   ---

   기본개념

   • dynamic route를 이용한다면, build 시에 HTML을 생성하기 위해 path list를 정의해야할 필요가 있음
   • 이런 경우에 getStaticPaths를 사용
   • Next.js는 getStaticPaths에 정의된 모든 …

   read more

4. [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

5. [Next.js] Navigate Between Pages

   Navigate Between Pages

   ---

   설명

   • Link 컴포넌트는 Next.js 앱의 페이지 간에 client-side-navigation을 가능하게 함
   • 자바스크립트를 통해서 페이지 전환을 하기 때문에 브라우 …

   read more

6. [Next.js] Pre-rendering and Data Fetching

   Pre-rendering and Data Fetching

   ---

   Pre-rendering

   • Next.js는 브라우저가 로드 되면 모든 페이지를 pre-render한다.
   • 생성된 HTML은 최소한의 필요한 자바스크립트 코드가 포함되어 있어 화 …

   read more

7. [Next.js] TypeScript with Next

   TypeScript

   ---

   설치

   npm install --save-dev typescript @types/react @types/node
   

   확장자

   • js -> tsx

   read more