Next.js

vercel

기능

SSR지원
페이지 기반 클라이언트 사이드 라우팅
Hot Module Replacement를 통한 개발 환경에서 코드 자동 적용
코드 스플릿팅을 통한 빠른 페이지 로드
- SPA에 단점인 보고싶은 페이지를 불러올때 모든 페이지에 대한 정보가 받아지는 것을 개선한 것으로써 보고싶은 페이지에 대한 정보만 불러오게 유동적으로 해결해주는 방법입니다
Babel / Webpack 환경설정 및 커스터마이징 가능
Express나 Node.js 서버와 함께 사용 가능

setting

yarn add react react-dom next

// 타입스크립트 버전
yarn create next-app --typescript

추가적인 Sass 설치

npm i sass

설치 후 package.json 수정

"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
}

모든 설치가 끝나면 다음 명령어를 통해 dev 서버를 실행하고 http://localhost:3000에 접속하면 확인할 수 있습니다

npm run dev
or
yarn dev

라우팅

pages

Next.js에서는 특수한 디렉토리인 pages 폴더에서 라우터를 관리합니다

원하는 라우터명으로 폴더를 생성하고 해당 파라미터에 메인화면으로 보여주고 싶은 파일은 index.tsx로 작성합니다

그 외 다른 파일들은 소문자로 만들어서 넣어주면됩니다

Link

리액트와 동일하게 Link 태그를 사용해서 이동할 수 있지만 href를 사용하며 내부에는 a태그나 커스텀 컴포넌트가 들어옵니다

<Link href="/test" />
    <a>Test Page</a>
</Link>

또한 a태그가 들어올시 Link 태그 안에 passHref를 작성해줘야합니다

전체적인 모습은 다음과 같습니다

import Link from 'next/link'

const Test = () => (
  <div>
    <Link href="/test" passHref />
        <a>Test Page</a>
    </Link>
    <p>Hello Next.js</p>
  </div>
)

export default Test

다이나믹 라우팅

추후 작성

공통 컴포넌트 사용

공통적으로 사용하는 Header나 Layout 같은 컴포넌트들은 한번 생성하면 유용하게 사용할 수 있습니다
위와 같은 컴포넌트들을 생성했다면 pages/index.tsx에 가지고와서 사용할 수 있습니다

혹은 아래처럼 Layout 컴포넌트에 Header를 넣어주고 children으로 받아와서 사용하면 됩니다

import Header from './Header'

const LayoutSection = {
  ...
}

const Layout = ({children}) => (
  <LayoutSection>
    <Header />
    {children}
  </LayoutSection>
)

export default Layout

위와 같이 만든 컴포넌트를 pages/index.tsx에 적용해준다면 공통 컴포넌트를 사용할 수 있습니다

사용 예시

Next.js로 작업중인 프로젝트입니다

실제로 사용중인 코드를 확인하시고 이해에 도움이 되셨으면 합니다

부족한 부분은 댓글로 알려주시면 감사하겠습니다

깃헙: kaen7 | 배포: LostGold