React/Next.js
Next.js - 시작하기 (start Next.js)
에포트
2020. 10. 5. 17:06
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