💁‍♂️ NEXTJS 공식문서를 보고 정리 한글입니다 * 모든 이미지,예제 출처는 공식문서입니다 (지속 수정중)
: https://nextjs.org/docs/basic-features/fast-refresh

NEXT.JS

이점

페이지

page: https://nextjs.org/docs/basic-features/pages

Next 는 모든 페이지를 사전 렌더링 한다

2가지 형식의 렌더링을 제공하고 아래와같다

Next 에선 정적 생성을 권장하고 있다

정적생성 방식은 추가 구성없이 CDN에 의해 캐시될수 있기 떄문이다

정적생성

getStaticProps

: 변화가 없을 데이터에사용함

Next(SSR) 를 사용하지 않는 환경(CSR) 에선
요소가 자리를 잡고 fetching(api 데이터 요청) 하게된다 이렇게되면 사용자의 눈에는 페이지가 fetching 된 데이터가 잘보일수 있지만
브라우저봇은 fetching 된 데이터를 읽지 못한다 (SEO 🔽)
따라서 getStaticProps 를 사용하여 미리 사전에 데이터를 fetching 하는것이다


💁‍♂️ 사전에 변하지 않을 데이터를 요청하므로 변하지 않는데이터 (사용자가 변화시키지않을것같은) 에 적용한다

EX

(getStaticProps)

정보를 렌더링하기위해 posts 라는 데이터가 필요하다

getStaticProps 를 활용하여 posts데이터를 사전에 fetching 해준다

페이지간 이동

브라우저가 전체 새로 고침됨 WHAT? 단점아닌가

코드 분할 / 미리 파일 가져오기

단점을 장점으로 NEXTJS 의 마법 - 미리 페이지를 가져옴

라우팅

정적경로

pages/posts/[pid].js 다음 과 같은 폴더구조를 만들면 Next.js가 알아서 pages를 찾아 Routes를 구성

동적경로 (:id)

Dynamic Routes: https://nextjs.org/docs/routing/dynamic-routes
useRouter: https://nextjs.org/docs/api-reference/next/router#userouter

Router 반환 프로터티

pathname: String- 뒤에 오는 현재 경로 파일의 경로 /pages. 따라서 , basePath및 locale후행 슬래시( trailingSlash: true)는 포함되지 않습니다.
query: - 동적 경로Object 매개변수를 포함하여 개체로 구문 분석된 쿼리 문자열입니다 . 페이지가 서버 측 렌더링을 사용하지 않는 경우 사전 렌더링 중에 빈 객체가 됩니다 . 기본값은{}
asPath: String- 검색 매개변수를 포함하고 구성을 존중하는 브라우저에 표시되는 경로입니다 trailingSlash. basePath및 locale포함되지 않습니다.
isFallback: boolean- 현재 페이지가 폴백 모드 인지 여부 .
basePath: String- 활성 basePath (활성화된 경우).
locale: String- 활성 로케일(활성화된 경우).
locales: String[]- 지원되는 모든 로케일(활성화된 경우).
defaultLocale: String- 현재 기본 로케일(활성화된 경우).
domainLocales: Array<{domain, defaultLocale, locales}>- 구성된 모든 도메인 로케일.
isReady: boolean- 라우터 필드가 클라이언트 측에서 업데이트되고 사용할 준비가 되었는지 여부. 메서드 내에서만 사용해야 하며 useEffect서버에서 조건부 렌더링에 사용해서는 안 됩니다. 자동으로 정적으로 최적화된 페이지의 사용 사례는 관련 문서를 참조하세요.
isPreview: boolean- 애플리케이션이 현재 미리보기 모드 인지 여부 .