다음.뉴 노멀

다음.js는 React 기반의 전체 창고 프레임워크입니다.js.

다음과 같은 이점을 제공합니다.

프리젠테이션: 전체 HTML이 서버에서 만들어져 클라이언트에게 전송됩니다.따라서 클라이언트는 JS 파일이 아닌 HTML을 수신합니다.HTML (문자열) 을 사용할 수 있으면 클라이언트에서 다시 수화됩니다.사람들은 보액을 사건 탐지기를 첨가해 상호작용을 하게 하는 것으로 볼 수 있다.기본적으로 모든 파이프라인은 미리 렌더링됩니다.

극본
다음 프로젝트를 실행하고 구축하는 데 사용되는 일반적인 명령은 다음과 같습니다.

"scripts":{
  "dev": "next",   // start in dev mode
  "build": "next build", // start production build
  "start": "next start" // run production build
}

경로

엔진 덮개 아래 reach-router

사용

파일 시스템 기반 라우팅

이를 위해 pages

이라는 특수 폴더를 만들었습니다.

모든 폴더/파일 이름이 해당 파일의 라우팅이 됩니다.

우리는 동적 루트를 처리하고 notes/:id 등 파라미터를 수신할 수 있다.이를 위해, notes 폴더에 [id].js(x)이라는 파일을 만들기만 하면 됩니다.만약 notes 폴더에 색인 파일이 있다면, 그것은 notes/ 루트

으로 간주될 것이다

은 렌더링 함수에서 파라미터를 사용해야 한다. 우리는 useRouter의 next/router 갈고리를 사용할 수 있다.강의의 경우 withRouter개의 HOC가 있습니다.

notes/[id].js

import { useRouter } from 'next/router'

function App(){
 const router = useRouter()
 const {id} = router.query

 return (
    ...
 )
}

export default App

참고: React에서 기능 어셈블리는 사실상 렌더링 기능입니다.기능 구성 요소의 경우 전체 함수는 렌더링 방법입니다.클래스에 대해 우리는 되돌아오는 값을 가진 현식 render()이 있을 것이다.

, 예를 들어 notes/shihab/1을 처리하려면, notes 디렉터리에 [...slug].js이라는 파일이 있을 수 있습니다.이번 공유기 조회는 ['shihab',1]과 비슷한 그룹을 되돌려줍니다.전체 포획 노선이 있어도 이 인덱스는 여전히 사용될 것이다.

항행

연결 구성 요소

내비게이션 next/link에 대해 Link 요소를 공개해 주세요.그것은 항상 클라이언트 루트에 사용됩니다.이것은 내비게이션을 할 때 네트워크 호출을 촉발하지 않는다는 것을 의미한다.

import Link from 'next/link'

function App(){
  ...
  return {
    ....
    <Link href='/notes/[id]' as={`/notes/${id}`}>
      <a>Note</a>
    </Link>
  }
}

as 경로는 정확한 경로 URL이 되고 href 경로는 파일의 상대적인 위치가 됩니다.href 아이템은 페이지 목록의 페이지 이름을 사용합니다.동적 노선에 as 아이템이 필요합니다.
링크 구성 요소의 하위 단계로 a표시가 있어야 하지만 href는 링크에 있습니다.
서버 측 라우팅의 경우 언제든지 <a href='/docs'>Server side routing</a>과 같은 앵커 마크를 사용할 수 있습니다.

프로그램 라우팅

코드에서 내비게이션을 위해 router.push()의 next/router 갈고리 중의 useRouter을 사용할 수 있다.

import { useRouter } from 'next/router'

function naviagteOnSuccess(){
 const router = useRouter()

 ....
 router.push('/notes/[id]',`/notes/${note.id}`)
}

스타일링

글로벌 CSS를 사용하는 경우 유일하게 가져올 수 있습니다.다음에 다른 곳에서 가져오려고 시도하면js에서 오류가 발생했습니다.이것은 귀속 스타일과 마운트 스타일

과 더욱 관련이 있습니다

다음.js는 언제든지 CSS 모듈을 지원합니다.CSS 모듈을 사용하면 파일 범위의 스타일을 얻을 수 있습니다.CSS 모듈 파일을 가져올 때마다 사용하는 클래스에 파일별 클래스 이름(접두사)이 추가됩니다.따라서 사용자가 사용하는 스타일은 특정 파일에만 적용되며 다른 파일과 충돌하지 않습니다.CSS 모듈은 클래스와 ID 등 비순수 선택기에만 적용되며 요소 선택기(div, span, p 등)에는 적용되지 않습니다.파일 이름은 pages/_app.js이어야 합니다.

특수 파일

파일 이름.모듈（s） css

넥스트의 입구 파일을 납치하고 싶다면 _app.js 파일이 바로 이곳입니다.글로벌 스타일, 소품 또는 무엇이든 주입하고 싶다면 이곳에서 진행해야 한다.만약 당신이 이렇게 하지 않는다면, 이 _app.js은 자동으로 당신을 위해 만들 것입니다.

다음.js 설정

_app.js 프로젝트의 루트 디렉토리

TS 지원

은 루트 디렉토리에 next-config.js만 생성하면 됩니다.

에는 LIB 및 종속성 추가가 필요합니다.그것들을 추가하다.

Bhoom, 이제 tsconfig를 자동으로 채웁니다.TS.

을 설치할 때 견인력 불필요

API 라우팅

다음은 완전한 창고 구조입니다.API 라우팅 프로세스를 .tsconfig.json 디렉토리에 배치할 수 있습니다.

라우팅은 페이지 라우팅과 같습니다.

데이터 획득

기본값:

에서

서버와 클라이언트에서 데이터를 얻을 수 있습니다.클라이언트 데이터는 일반 React 애플리케이션과 동일하게 가져옵니다.구성 요소는 서버에 나타날 수 있지만, 이 경우 데이터 취득은 클라이언트에서만 이루어집니다.이것은 클라이언트에서 데이터를 가져오면 서버에서 터치하지 않는다는 것을 의미한다.서버는 구성 요소의 초기 상태로 보기를 보여 줍니다. 단지 이것뿐입니다.아니오, 클라이언트 캡처나 작업이 끝날 때까지 기다립니다.
보유한 서버에서 데이터 가져오기

getStaticProps

GetStaticPath

getServerSideProps

getInitialProps

이상의 모든 방법은 서버에서만 실행됩니다. (후속 호출 기간에 getInitialProps는 제외됩니다.)

클라이언트 패키지

에 추가되지 않음

데이터베이스, 파일 시스템 및 서버에서 수행할 수 있는 모든 작업에 액세스할 수 있는

이러한 방법의 반환값(대상)은 JSON 파일

으로 클라이언트 구성 요소에 주입되거나 전송됩니다.

도구

은 구성 요소에 정적 지주를 전달합니다. 이 구성 요소는 구축 기간에

을 사용할 수 있습니다.

getStaticPaths 방법

에서 아이템을 받을 수 있습니다

반환값은 항상

객체입니다.

이 대상은 구성 요소

내 아이템으로 사용 가능

동적 페이지를 구축할 때 GetStaticPath에서 getStaticProps에서 pages/api을 전달합니다

은 구축할 때 한 번만 호출한다(params 명령을 사용하여 구축할 때)

export async function getStaticProps(context) {
  return {
    props: {}
  }
}

GetStaticPath

정적 페이지를 생성하려면 이 방법

next build의 그룹을 되돌려야 합니다

이 페이지들은 구축할 때 경로

에 만들어진 것이다

페이지에서 데이터를 얻으려면 getStaticProps를 사용합니다

은 모든 페이지를 사전에 정적으로 생성할 필요가 없으므로 paths

을 사용하여 런타임 SSR을 선택할 수 있습니다.

페이지 롤백 기능을 사용하여 필요한 경우 로더를 표시할 수 있습니다.

export async function getStaticPaths() {
  // get all the paths for your posts from an API
  // or file system
  const results = await fetch('/api/posts')
  const posts = await results.json()
  // create the paths array
  const paths = posts.map(post => ({params: {slug: 
  post.slug}}))
  /*
  [
    {params: {slug: 'get-started-with-node'}},
    {params: {slug: 'top-frameworks'}}
  ]
  */
  return {paths}
}

export async function getStaticProps({ params }) {
  const res = await fetch(`/api/post/${params.slug}`)
  const post = await res.json()
  return {
    props: {post}
  }
}

getServerSideProps

은 서버의 모든 요청을 호출했습니다.

동적 SSR 라우팅에 대한 데이터 가져오기

HTTP 헤더, 쿼리 매개 변수, req 및res 헤더

에 액세스할 수 있습니다.

은 클라이언트 내비게이션에서도 서버에서 터치하여 데이터를 아래로 전송합니다.이것은 사실상 한 차례의 추가 왕복이다😢.

export async function getServerSideProps() {
  const response = await fetch(`https://somedata.com`)
  const data = await response.json()

  return { props: { data } }
}

getInitialProps

은 파일에 따라 권장되지 않지만 아직 사용되지 않음💪

서버측 렌더링(SSR) 페이지는 서버에서 실행되며 데이터는 JSON

으로 전달
클라이언트 렌더링(CSR)용 (Client Rendering)

데이터 검색용

참고: URL/주소 표시줄 탐색을 통해 페이지를 가져오면 SSR입니다.클라이언트 내비게이션에서 CSR입니다.

언제 시작 해요?

에 데이터가 필요하지만 SSR이 필요하지 않습니까?클라이언트 데이터를 사용하여 얻습니다.

실행 시 데이터가 필요하지만 SSR이 필요합니까?getServerSideProps

사용

페이지를 구축할 때 액세스할 수 있는 데이터에 의존하고 있습니까?예를 들면 CMS?getStaticProps

사용
위와 같은 요구 사항이 있지만 페이지에 동적 URL 매개 변수가 있습니까?getStaticProps 및 GetStaticPath 사용

렌더링 모드

기본적으로 3가지 렌더링 모드가 있습니다.

정적: 페이지가 실행될 때 생성됩니다.

서버: 페이지는 각 요청에 따라 구성되며 처음에

을 클릭한 후 캐시됩니다.

클라이언트: 클라이언트에서 렌더링됩니다.서버에서는 HTML 태그 문자열을 보내지 않습니다.기본적으로 다음 을 사용하면 페이지가 미리 표시됩니다.js.

렌더링 형식의 선택은 우리가 선택한 데이터 획득 정책에 근거합니다. (주로)기본적으로 다음 단계는 페이지를 미리 보여 줍니다.미리 보여 주는 것은 서버가 클라이언트에게 HTML 태그 문자열을 보내는 것을 의미합니다.요청을 받으면 클라이언트는 주입 탐지기와 처리 프로그램을 통해 상호작용을 시도할 것입니다.
적절한 데이터 획득 정책을 선택하면 프로그램의 렌더링 모드를 결정할 수 있습니다.
하면, 만약, 만약...

DOM API

은 고객 데이터에만 해당됩니다.
서버 측이 그것들을 보여주는 것은 무의미하다.우리는 사용할 수 있고,

const NoSSR=dynamic(()=>import('../component'),{
 loading:()=><div>Loading.....</div>,
 ssr:false
})

fallback: true은 항상 클라이언트에 의해 제공됩니다.

배치하다

기본적으로 노드가 필요합니다.js 환경.<NoSSR/>을 사용하면 다음 프로젝트에서 순수한 정적 구축을 만들고 서버를 제공할 수 있습니다.