Record
개념
-
설치
React.js
- npx create-react-app react-material-ui
- cd react-material-ui
- npm install @material-ui/core
- npm install contentful
- npm start
- http://localhost:3000/
- npm install @material-ui/icons
Next.js
- npm init
- npm install –save react react-dom next@7.0.2 express
- npm install –save-dev @babel/node @babel/preset-env
- npm install –save @material-ui/core @material-ui/icons @material-ui/styles
next // 내장되어 있는 webpack-dev-server로 기동
next build // 프로젝트를 빌드하여 .next 폴더를 생성한다.ls
next start // 빌드된 .next 폴더를 기준으로 웹 서버를 기동해준다.
next export // html 파일들로 내보내기를 해준다.
Next.js 기본 구조
pages/ // HTML Document, Application Container, 각종 페이지 등을 작성한다.
_document.js // HTML Document.
_app.js // Application Container. 공통의 레이아웃을 작성한다.
_error.js // Error Page.
index.js // Root Page /로 시작되는 경로를 말한다.
hello.js // Hello Page /hello로 시작되는 경로를 말한다.
static/ // 정적 파일 (이미지, 파일 등)을 업로드 한다.
next.config.js // Next.js의 환경 설정 파일이다. 라우팅 설정, typescript, less 등의 webpack 플러그인을 설정한다.
_document.js SPA에서 시작점이 되는 index.html이라고 생각하면 된다.
_app.js React에서 대부분 App.js이라는 이름으로 공통의 레이아웃을 작성하듯이 Next.js에서는 Application의 공통 레이아웃을 _app.js에서 작성할 수 있다.
_error.js Error 처리를 공통으로 하고자 할 때, 공통적으로 사용할 수 있는 Error Page를 작성할 수 있다.
next.config.js webpack plugin들과 Next.js의 라우팅 설정을 작성한다.
build 오류
- 다른 경로에서 동일한 빌드 제공
- build 후 Blank 페이지
-
Blank page after running build on create-react-app
-
I have solved the problem by setting homepage: “.” according to this doc
-
https://facebook.github.io/create-react-app/docs/deployment
-
“homepage” : “.” ,
-