Next.js - 시작하기 (start Next.js)

Next.js는 기본적으로 리액트를 기반으로 한 SPA (single page application) 을 빠르게 빌드할 수 있도록 도와주는 프레임워크이다. Next.js를 이용하면 빠르게 SPA를 빌드할 수 있으며, 기본적인 리액트 지식만 있다면 웹앱을 빠르게 빌드할 수 있도록 도와준다. 또한, Next.js는 매우 간단하며 커스터마이징이 매우 용이하다.

 

Next.js의 특징과 장점

• 기본적으로 서버사이드 렌더링 (server-side rendering) 을 지원한다.
• 더욱 빠른 페이지 로드를 위한 코드 스플리팅을 자동으로 해준다.
• HMR을 지원하는 웹팩 기반 환경을 제공한다.
• Express나 Node.js와 같은 http 서버와 함께 구현이 가능하다.

 

시작하기

먼저 프로젝트 폴더를 생성한 후, 아래와 같은 패키지들을 설치해준다.

 

> npm i react react-dom next

 

그 후, package.json의 다음 스크립트들을 추가해준다.

 

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

 

이제 프로젝트 폴더에 들어가 pages 라는 폴더를 생성한 후, pages 디렉터리에 index.js 파일을 생성한 후 다음과 같이 코드를 작성해준다.

 

const index = () => <h1>hello world</h1>;

export default index;

 

그 후, 다음과 같이 next를 실행시킨다.

 

> npm run dev

 

이제 localhost:3000에 서버가 실행중이라고 뜬다면 성공이다. localhost:3000에 들어가서 웹페이지를 확인하면,

 

위와 같이 잘 실행되는 것을 볼 수 있다.

 

일반적으로 사용하던 create-react-app 또는 그냥 리액트와 다른 점은 react를 import 해 올 필요가 없다는 것이다.

 

출처

velog.io/@jakeseo_me/Next.js-%EB%B9%A8%EB%A6%AC-%EB%B0%B0%EC%9A%B0%EA%B8%B0-y0jz9oebn0

jcon.tistory.com/124