Next軽く使ってみたので振り返り

とりあえず Docs に軽く目を通して、 Learn Next.js で雰囲気を掴んで、examples を参考にする形でプロフィールサイトなるものを作っていった。

完成してはいないが現在の構造としては下記のような感じになっている。

.
├── components
│   ├── Home.js
│   ├── RedirectChecker.js
│   ├── common
│   │   ├── AppBase.js
│   │   └── Navbar.js
│   ├── form_helpers
│   │   └── renderField.js
│   └── forms
│       └── RedirectChecker.js
├── constants
│   └── index.js
├── containers
│   ├── RedirectChecker.js
│   └── common
│       └── Navbar.js
├── ducks
│   ├── index.js
│   ├── navBar.js
│   └── redirectChecker.js
├── env-config.js
├── next.config.js
├── package-lock.json
├── package.json
├── pages
│   ├── _app.js
│   ├── index.js
│   └── redirect_checker.js
├── store.js
├── styles
│   └── style.sass
└── validators
    ├── required.js
    └── url.js

package.jsonは現状下記のような感じ

{
  "name": "prof",
  "version": "2.0.0",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "export": "next export",
    "deploy": "npm run build && npm run export"
  },
  "dependencies": {
    "@zeit/next-sass": "^1.0.1",
    "axios": "^0.18.0",
    "bulma": "^0.7.2",
    "next": "7.0.2",
    "next-redux-wrapper": "latest",
    "node-sass": "^4.11.0",
    "react": "16.7.0",
    "react-dom": "16.7.0",
    "react-redux": "5.0.7",
    "redux": "4.0.0",
    "redux-devtools-extension": "2.13.2",
    "redux-form": "^8.1.0",
    "redux-thunk": "^2.2.0",
    "validator": "^10.10.0"
  },
  "license": "ISC",
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.6.3",
    "babel-eslint": "^10.0.1",
    "babel-plugin-transform-define": "^1.3.1",
    "eslint": "^5.12.0",
    "eslint-config-prettier": "^3.4.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-config-standard-react": "^7.0.2",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-node": "^8.0.1",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-react": "^7.12.3",
    "eslint-plugin-standard": "^4.0.0",
    "prettier": "^1.15.3"
  }
}

ducks、 flux-standard-action、 with-redux-wrapper、 with-next-sass、 with-universal-configuration-build-timeを参考にして実装を進めていった。

Deploy Next.js project to Netlifyを参考にしてnetlifyにホスティングした。

今後は with-typescript を参考にしてTypeScriptに移行したり、 Atomic Designに従ったディレクトリ構成の検証等もしていく予定。

とりあえずNextはルーティング周りで辛みがないので幸せだった。