Next.js로 정적 웹사이트 만들기 - 2. 프로젝트 구성
사실 Next.js는 설명할게 별로 없다. 예제들이 너무 잘되어 있기 때문에.. 그렇지만 내 머릿속에서 사라져가기 때문에 기록이라도 남기려고 작성한다.
1. npm 프로젝트 생성
프로젝트를 구성하기 위해 static-website 디렉토리를 하나 만들고 cd static-website로 가서 npm init으로 npm 프로젝트를 만들자.
참고로
npm init을 실행하게 되면 여러 입력을 받게 되는데, 나중에 변경할 수 있으니 다 엔터를 치고 넘어간다.
npm init이 완료되었으면, static-website 폴더에 package.json 파일이 하나 생성된걸 볼 수 있는데, npm 프로젝트는 이 파일로 시작해서 끝난다고 보면 된다.
2. dependencies 설치
기본적으로 Next.js로 프로젝트를 구성하여 웹 페이지까지 띄우기 위해 필요한 종속성으로는 다음이 필요하다.
- @babel/node // node 파일에서 es6 문법을 사용하기 위해서
- @babel/preset-env // es6 문법을 사용하기 위해서
- next@7.0.2 // Next.js구조에서 확인 가능
- react
- react-dom
이 종속성들을 설치해보자.
static-website 경로에서 각 명령어들을 실행한다.
depenencies
npm install --save react react-dom next@7.0.2 express
devDependecies
npm install --save-dev @babel/node @babel/preset-env
이렇게 npm install 명령어로 종속성들을 설치하고나면 다음과 같이 package.json이 구성된다.
-dev가 붙은 것과 아닌 것의 차이는 runtime 중에 종속성을 사용하냐 안하냐로 대부분 구분 짓는다.
{
"name": "static-website",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"next": "^7.0.2",
"react": "^16.8.6",
"react-dom": "^16.8.6"
},
"devDependencies": {
"@babel/node": "^7.2.2",
"@babel/preset-env": "^7.4.4"
}
}
여기까지 되었으면 향후에 이 프로젝트가 git에 연결될 수도 있기 때문에,static-website 경로에 .gitignore를 만들어 node_modules와 같은 것들을 제외 시켜준다.
현재는 node_modules와 package-lock.json만 있으니 두개를 제외시킨다.
node_modules/
pacakge-lock.json
next.config.js 생성
기본적으로 Next.js는 프로젝트의 루트 경로에 있는 next.config.js를 읽어들이게 된다.
간단하게 next.config.js를 생성한다. 파일 내용은 다음과 같이 작성한다.
module.exports = {};
향후에 플러그인들을 설정에 추가한다.
package.json 스크립트 작성
Next.js 패키지를 설치하게 되면 다음과 같은 cli를 제공한다.
- next // 내장되어 있는 webpack-dev-server로 기동
- next build // 프로젝트를 빌드하여 .next 폴더를 생성한다.
- next start // 빌드된 .next 폴더를 기준으로 웹 서버를 기동해준다.
- next export // html 파일들로 내보내기를 해준다.
Next.js에는 webpack 설정이 내장되어 있기 때문에, hot-loader 같은 것들이 기본적으로 동작한다.
다음과 같이 package.json의 scripts에 추가해준다.
{
"name": "static-website",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "next",
"build": "next build",
"start": "next start",
"export": "next export"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.0",
"next": "^7.0.2",
"react": "^16.8.6",
"react-dom": "^16.8.6"
},
"devDependencies": {
"@babel/node": "^7.2.2",
"@babel/preset-env": "^7.4.4"
}
}
이 상태로 npm run dev로 기동해보면 실패한다. 이유는 pages 폴더가 없어서 그렇다.
pages 폴더 및 index.js 파일 생성
static-website 경로에 pages 폴더를 생성하고 그 하위에 index.js 파일을 생성한다.
index.js 에는 다음과 같이 작성한다.
export default (props) => {
return (
<div>
static webiste
</div>
)
}
그리고 나서 npm run dev 를 다시 실행해본다.
next의 기본 포트는 3000이고 변경하고자 하면 next -p <포트 번호> 를 붙이면 된다.
localhost:3000으로 접속하여 화면을 확인하면 static website를 출력하는 화면이 나온다.
pages에 index.js를 작성하게 되면 index.js는 루트 컨텍스트로 인식하게 된다. 따라서 나중에 Home과 같은 화면은 index.js에서 컴포넌트를 구현하면 된다.
Next.js로 정적 웹사이트 만들기 목차
