Assets, Metadata, and CSS

설명

• Next.js 는 built-in CSS를 제공

Assets

• Next.js는 public 폴더 아래로 이미지 같은 정적 요소를 제어.
• public 폴더 아래의 파일들은 애플리케이션 …

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 폴더에 새로 …

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 …

getStaticPaths

기본개념

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

getStaticProps

기본개념

• async 함수인 getStaticProps 함수를 export하면 Next.js는 getStaticProps에 의해 return된 props를 이용해 build 시에 pre-rendering 함

export async function getStaticProps(context) {
  return {
    props: {}, // props로 page component에 전달될 것입니다.
  }
}

사용처

• 사 …

Navigate Between Pages

설명

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

참고

• Vercel next/router

router.push

사용법

• url: UrlObject | String - 이동하고자 하는URL
• as: UrlObject | String - (Optional) path에 대한 decorator
• options: object - (Optional) 아래 설정 가능
• scroll: boolean - 페이지 이동 후 스크롤을 …

Pre-rendering and Data Fetching

Pre-rendering

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

TypeScript

설치

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

확장자

• js -> tsx

출처

• Bash 쉘스크립트 개발 시작하기

설명

리눅스에서 프로그램을 실행할 때 사용자의 세션이 끊어지면(hangup) 프로그램도 함께 종 …