[Next.js] Next.js 정리 노트

why Next.js ?

next.js -> 리액트 기반의 프레임워크로 서버 사이드 렌더링(SSR)을 지원하는 프레임워크라 SEO같은 것들을 쉽게 적용할 수 있다.

 

npx로 설치하지 않고 'create-next-app'이란 명령어로 생성 'create-react-app'이 아니다.

npx create-next-app nextjs-tutorial

 

설치 후 package.json에서 확인  npm run dev 명령어로 실행시켜 로컬환경에서 돌려볼 수 있다. 

 

---

UI 프레임워크 사용 ( sementic ui )

sementic uinpm install semantic-ui-react semantic-ui-css

sementic uinpm install semantic-ui-react semantic-ui-css

 

Next.js 프로젝트 생성 시 생기는 파일, 디렉토리 형태 분석

 

_app.js

 

레이아웃을 만들기 위해선 _app.js를 이용하고 모든 페이지는 _app.js를 통해야한다.

-> 페이지 전 환시 레이아웃을 유지할 수 있다.

-> 페이지 전환시 state값을 유지할 수 있다.

-> componentDidCatch를 이용해서 커스텀 에러 핸들링을 할 수 있다.

-> 추가적인 데이터를 페이지로 주입시켜주는 게 가능하다.

-> 글러볼 CSS를 이곳에 선언한다.

 

 

/page/_document.js

 

_document.js 를 만들 수 있는데, next.js는 마크업 정의를 건너 띄고 페이지를 만드므로 html, head , body태그를 생성하려면 _document에서 정의해줘야 한다.

 

* _app 과 _document의 차이점이 있나?

_app은 global css나 레이아웃을 잡아주는 역할, 

_doument는 서버에서만 렌더링되고 onClick같은 이벤트 핸들러는 적용되지 않음.

 

_document에서는 css를 넣으면 안됨. _app에서나 각 컴포넌트에서 적용해야한다.

 

 

---

라우팅(Dynamic Routes)

next.js에서 Dynamic Routes를 사용해봤다. 

'/post/1' 이렇게 post다음 특정 id로 넘길 경우, 디렉토리의 'pages/post/[pid].js' 와 매칭시켜서 작성하면 된다.

import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { pid } = router.query

  return <p>Post: {pid}</p>
}

export default Post

next.js 문서에 예제이다. 

pages

|--> view

|---->[pid].js

 

이렇게 pid로 매칭시켜서 대괄호로 묶어서 생성하면 된다.

 

그다음 누르면 보내줘야 하므로

'next/link' 를 사용해야 한다.

 

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/post/abc">
          <a>Go to pages/post/[pid].js</a>
        </Link>
      </li>
      <li>
        <Link href="/post/abc?foo=bar">
          <a>Also goes to pages/post/[pid].js</a>
        </Link>
      </li>
      <li>
        <Link href="/post/abc/a-comment">
          <a>Go to pages/post/[pid]/[comment].js</a>
        </Link>
      </li>
    </ul>
  )
}

export default Home