본 포스팅은 공식문서를 기반으로 만들어 졌습니다.
NextJS는 Node 14.6.0버전이상에서만 지원되니깐 먼저 참고하길 바랍니다.
MacOS, Window(including WSL), Linux 환경에서 지원됩니다.
만약 처음부터 Next를 도입하기로 결정하셨다면 다음과 같은 작업을 따릅니다.
npx create-next-app@latest {directory/name}
# or
yarn create next-app {directory/name}
📑 타입스크립트로 만들기
npx create-next-app@latest {directory/name} --typescript # or yarn create next-app {directory/name} --typescript
설정이 완료 된 후 npm run dev
또는 yarn dev
개발서버를 실행하여 확인해주세요.
이미 있는 프로젝트에 Next.js를 적용할려면 다음과 같은 작업이 필요합니다.
npm i next react react-dom
# or
yarn add next react react-dom
설치가 완료 되었다면 package.json을 열고 다음과 같이 추가해줍니다.
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
next dev
개발 모드로 앱을 실행하기 위한 명령next build
프로덕션 사용을 위한 앱 빌드 명령next start
프로덕션 서버를 실행하기 위한 명령next lint
NextJS 내장 ESLint구성을 설정하기 위한 명령그 후 애플리케이션 디렉토리에 pages와 public폴더를 만들어 줍니다. (필수)
pages 폴더에 루트로 접속 될 페이지인 index.tsx
를 만든 후 다음과 같이 내용을 채워주세요.
function HomePage() {
return <div>Welcome to Next.js!</div>
}
export default HomePage
설정이 완료 된 후 npm run dev
또는 yarn dev
개발서버를 실행하여 확인해주세요.
뭐 SSR지원
최적화
, 빌드에서의 강력함
되게 많은데 가장 간단하고 강력한 장점은 디자인패턴과 자잘한 패키지는 세팅 되어 준비된 boilerplate이기 때문입니다.
나는 개인적으로 이 점 하나 덕분에 대형기업에서 많이 쓴다고 생각합니다.
바닐라 리액트는 CSR기반이기에 많은 부분을 클라이언트(사용자)에게 부담합니다.
초기페이지 하나도 브라우저가 script를 거쳐서 가져오게 합니다.
사용자의 인터넷 속도가 빠르다면 큰 문제가 되지 않지만 인터넷이 느리다면 가져 올 때 까지
빈 화면만 바라봐야 되며 이는 사용자 경험을 크게 해하는 일입니다.
Next.js를 이용하면 동적인 부분(script)과 정적인 부분(UI) 구분하여 랜더링이 가능합니다.
간단한 기능 같지만 SEO에도 유리하고 사용자 경험도 크게 향상 할 수 있습니다.