Next js 튜토리얼 1편: 시작하기

처음으로 next js를 사용하여 자사 홈페이지를 리뉴얼 하는 프로젝트를 진행했습니다.

어떻게 학습하며 프로젝트를 진행했는지 정리하려 합니다.

가장 우선적으로 한 일은 next js docs에서 제공하는 튜토리얼을 학습했습니다.

그에 따라 next js docs를 기반으로 작성하겠습니다

목차

Next js 튜토리얼 1편: 시작하기  - 현재 글

Next js 튜토리얼 2편 : 페이지 이동 

Next js 튜토리얼 3편 : 공통 컴포넌트 사용

Next js 튜토리얼 4편 : 동적 페이지  

Next js 튜토리얼 5편 : 동적 라우팅  

Next js 튜토리얼 6편 : 데이터 가져오기  

Next js 튜토리얼 7편 : 컴포넌트 스타일링  

Next js 튜토리얼 8편 : 배포  

NEXT.js의 기능

 - 기본적으로 서버사이드 렌더링 지원 합니다

 - 빠르게 페이지를 로드하기 위해 자동으로 코드 스플릿을 해줍니다

 - 페이지를 기반으로 간단한 클라이언트 사이드 라우팅을 제공합니다

 - 개발 환경에서 Hot Module Replacement를 지원합니다 

   (dev 모드에서 코드가 수정되면 따로 빌드하지 않아도 자동으로 적용을 시켜줍니다)

 - Express 또는 Node 서버와 함께 사용할 수 있습니다

 - Babel과 Webpack 설정을 원하는데로 수정할 수 있습니다

Setup

Next.js는 window, mac, linux에서 모두 동작합니다. Next.js를 사용하기 위해서는 Node.js만 설치하면 됩니다

각 운영체제 별로 설치 방법은 생략하겠습니다

시작하기 위해 다음 명령을 실행해주세요

mkdir hello-next

cd hello-next

npm init -y

npm install --save react react-dom next

mkdir pages

그 후 package.json을 수정해주세요

"scripts": {

    "dev": "next",

    "build": "next build",

    "start": "next start"

  }

기본적인 준비는 끝났습니다. 다음 명령어를 실행하면 dev 서버가 켜집니다

npm run dev

그 후 http://localhost:3000에 접속하면 아직 첫페이지를 만들지 않았기 때문에 404에러 화면을 볼 수 있습니다.

Creating Our First Page

그럼 첫 페이지를 만들어 봅시다

pages/index.js에 아래와 같이 입력하세요

const Index = () => (

  <div>

    <p>Hello Next.js</p>

  </div>

);

export default Index;

다시 http://localhost:3000에 접속하면 Hello Next.js가 페이지에 나타납니다

다음 장에서는 페이지들을 연결하는 방법에 대해 정리하겠습니다

---

Next js 튜토리얼 1편: 시작하기  - 현재 글

Next js 튜토리얼 2편 : 페이지 이동 

Next js 튜토리얼 3편 : 공통 컴포넌트 사용

Next js 튜토리얼 4편 : 동적 페이지  

Next js 튜토리얼 5편 : 동적 라우팅  

Next js 튜토리얼 6편 : 데이터 가져오기  

Next js 튜토리얼 7편 : 컴포넌트 스타일링  

Next js 튜토리얼 8편 : 배포