처음으로 next js를 사용하여 자사 홈페이지를 리뉴얼 하는 프로젝트를 진행했습니다.
어떻게 학습하며 프로젝트를 진행했는지 정리하려 합니다.
가장 우선적으로 한 일은 next js docs에서 제공하는 튜토리얼을 학습했습니다.
그에 따라 next js docs를 기반으로 작성하겠습니다
목차
NEXT.js의 기능
- 기본적으로 서버사이드 렌더링 지원 합니다
- 빠르게 페이지를 로드하기 위해 자동으로 코드 스플릿을 해줍니다
- 페이지를 기반으로 간단한 클라이언트 사이드 라우팅을 제공합니다
- 개발 환경에서 Hot Module Replacement를 지원합니다
(dev 모드에서 코드가 수정되면 따로 빌드하지 않아도 자동으로 적용을 시켜줍니다)
- Express 또는 Node 서버와 함께 사용할 수 있습니다
- Babel과 Webpack 설정을 원하는데로 수정할 수 있습니다
Setup
시작하기 위해 다음 명령을 실행해주세요
mkdir hello-next
cd hello-next
npm init -y
npm install --save react react-dom next
mkdir pages
그 후 package.json을 수정해주세요
기본적인 준비는 끝났습니다. 다음 명령어를 실행하면 dev 서버가 켜집니다
npm run dev
그 후 http://localhost:3000에 접속하면 아직 첫페이지를 만들지 않았기 때문에 404에러 화면을 볼 수 있습니다.
Creating Our First Page
다시 http://localhost:3000에 접속하면 Hello Next.js가 페이지에 나타납니다
다음 장에서는 페이지들을 연결하는 방법에 대해 정리하겠습니다
'WEB > Nextjs' 카테고리의 다른 글
| Next js 튜토리얼 3편 : 공통 컴포넌트 사용 (0) | 2019.09.30 |
|---|---|
| Next js 튜토리얼 2편 : 페이지 이동 (3) | 2019.09.30 |
| react get browser size (0) | 2019.09.10 |
| next js scroll (0) | 2019.09.06 |
| next js에 css 적용 (bootstrap, styled-component) (3) | 2019.08.22 |