Next 시작하기 - next.js 설치, CNA 사용해보기

next에서는 굳이 import React from 'react'를 작성하지 않아도 된다.

next.js 설치하기

npm install react react-dom next

pages 폴더 만들기

next가 pages 폴더를 인식하기 때문에 반드시pages라는 이름의 폴더여야만 한다.
pages 안에 있는 컴포넌트를 모두 페이지(코드 스플리팅된 컴포넌트)로 만들어준다.

package.json 수정하기

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

"scripts" 부분에 "dev" : "next" 를 작성해주면
터미널에서 npm run dev 했을 때 개발 서버가 실행된다.

pages 폴더에 index.js를 만들어보았다.

function HomePage() {
  return <>안녕! next.js ★</>;
}

export default HomePage;

터미널에 npm run dev 명령어를 입력하고
브라우저 localhost:3000 으로 접속해보면 렌더링된 화면을 확인할 수 있다.

간단한 카운트 만들어보기

import { useState } from 'react';

function HomePage() {
  const [count, setCount] = useState(0);

  const increase = () => {
    setCount((prevCount) => {
      return prevCount + 1;
    });
  };

  return (
    <>
      <h2>Next.js </h2>
      <p>{count}</p>
      <button onClick={increase}>+</button>
    </>
  );
}

export default HomePage;

아직까지 사용 방법은 기존에 알고 있던 리액트 사용 방법에서 크게 벗어나지 않는 것 같다.

create-next-app

리액트 개발 환경을 쉽게 구성해주는 CRA가 있듯이 next에는 CNA가 있다

npx create-next-app

CNA를 통해 설치하는 방법으로도 사용해보았다.
렌더링된 화면을 띄워보면 다음과 같은 템플릿 페이지가 나타난다.

폴더 구조는 이렇게 구성되어 있다.
공식 문서의 가이드대로 index.js 파일의 "Welcome to" 부분을 "Learn"으로 변경해보았다.

파일을 저장하면 자동으로 Fast Refresh가 적용된다.
Next.js를 처음 만져봤는데 공식문서가 굉장히 깔끔하게 잘 되어 있었다.
이제 막 시작 단계지만 천천히 공식문서를 잘 따라가봐야겠다.

---

참고 자료
Next.js 공식문서