Create React Appと同様に、Create Next Appを使うとNext.jsのアプリケーションの雛形が簡単に作成できます。
作成時に指定できるexampleも豊富で約60種類もあります。一方でexampleが多すぎて、どれを参考にすればいいか分からない（見ていくのが大変）という問題があるかと思います。
そのためexampleごとの技術要素、構成、概要等をざっくりまとめてみました。
exampleとは
$ create-next-app --example xxx my-app-name
のように指定するxxxの部分を指しています。
一覧
| No. | example | react関連 | css | ui | state管理 | データ関連 | server | サーバサイドルーティング | staticファイル | babelプラグイン等 | i18n | その他のnextモジュール | その他 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | なし | react | styled-jsx | - | - | - | - | - | favicon.icon | - | - | next/link, next/head | prop-types |
| 2 | hello-world | react | - | - | - | - | - | - | - | - | - | next/link | - |
| 3 | basic-css | react | styled-jsx | - | - | - | - | - | - | - | - | - | - |
| 4 | with-aphrodite | react | aphrodite | - | - | - | - | - | - | - | - | next/document | - |
| 5 | with-apollo-and-redux | react | styled-jsx | - | redux | - | - | - | - | - | - | next/link | - |
| 6 | with-cxs | react | cxs | - | - | - | - | - | - | - | - | next/document | - |
| 7 | with-external-scoped-css | react | sass | - | - | - | - | - | - | babel-plugin-css-modules-transform | - | next/document | - |
| 8 | with-fela | react | fela | - | - | - | - | - | - | - | - | next/document | - |
| 9 | with-glamor | react | glamor | - | - | - | - | - | - | - | - | next/document | - |
| 10 | with-glamorous | react | glamor glamorous | - | - | - | - | - | - | - | - | next/document | - |
| 11 | with-global-stylesheet | react | scss | - | - | - | - | - | - | babel-plugin-module-resolver babel-plugin-wrap-in-js | - | - | postcss, autoprefixer |
| 12 | with-scoped-stylesheets-and-postcss | react | CSS Module | - | - | - | - | - | - | babel-plugin-wrap-in-js | - | next/head | postcss |
| 13 | with-styled-components | react | styled-components | - | - | - | - | - | - | babel-plugin-styled-components babel-preset-stage-0 | - | next/document | - |
| 14 | with-styled-jsx-postcss | react | styled-jsx | - | - | - | - | - | - | styled-jsx-postcss/babel | - | - | postcss |
| 15 | with-styletron | react | styletron | - | - | - | - | - | - | - | - | next/document | - |
| 16 | custom-server | react | - | - | - | - | 標準httpサーバ | if文による分岐 | - | - | - | next/link | - |
| 17 | custom-server-express | react | - | - | - | - | express | express | - | - | - | next/link | - |
| 18 | custom-server-hapi | react | - | - | - | - | hapi | hapi | - | - | - | next/link | - |
| 19 | custom-server-koa | react | - | - | - | - | koa | koa-router | - | - | - | next/link | - |
| 20 | data-fetch | react | - | - | - | isomorphic-fetch(REST API) | - | - | - | - | - | next/link | - |
| 21 | with-apollo | react | styled-jsx | - | - | Apollo(GraphQL) | - | - | - | - | - | next/link | prop-types |
| 22 | with-firebase | react | - | - | - | isomorphic-fetch(REST API) | express | express | - | - | - | - | firebase |
| 23 | with-socket.io | react | - | - | - | isomorphic-fetch(REST API), socket | express | - | - | - | - | - | - |
| 24 | head-elements | react | - | - | - | - | - | - | - | - | - | next/head | - |
| 25 | with-react-helmet | react | - | - | - | - | - | - | - | - | - | next/document | react-helmet |
| 26 | layout-component | react | - | - | - | - | - | - | - | - | - | next/link, next/head | - |
| 27 | nested-components | react | styled-jsx | - | - | - | - | - | - | - | - | - | - |
| 28 | shared-modules | react | CSS-in-JS | - | - | - | - | - | - | - | - | - | - |
| 29 | root-static-files | react | - | - | - | - | 標準httpサーバ | if文による分岐 | favicon.icon, robots.txt, sitemap.xml | - | - | - | - |
| 30 | svg-components | react | styled-jsx | - | - | - | - | - | - | babel-plugin-inline-react-svg | - | - | - |
| 31 | with-loading | react | - | - | - | - | - | - | - | - | - | next/link, next/head | nprogress |
| 32 | with-prefetching | react | - | - | - | - | - | - | - | - | - | next/link | - |
| 33 | progressive-render | react | styled-jsx | - | - | - | - | - | - | - | - | - | react-no-ssr |
| 34 | ssr-caching | react | - | - | - | - | express | - | - | - | - | next/link | lru-cache |
| 35 | parameterized-routing | react | - | - | - | - | 標準httpサーバ | path-match | - | - | - | - | - |
| 36 | using-inferno | inferno | - | - | - | - | 標準httpサーバ | - | - | - | - | next/link | - |
| 37 | using-preact | preact | - | - | - | - | 標準httpサーバ | - | - | - | - | next/link | - |
| 38 | with-i18next | react | - | - | - | - | - | - | - | - | i18next | - | - |
| 39 | with-react-intl | react | styled-jsx | - | - | - | 標準httpサーバ | - | - | babel-plugin-react-intl | react-intl | next/document | - |
| 40 | with-custom-babel-config | react | - | - | - | - | - | - | - | babel-preset-stage-0 | - | - | - |
| 41 | with-material-ui | react | CSS-in-JS | Material-UI | - | - | - | - | - | - | - | - | - |
| 42 | with-react-md | react | CSS-in-JS | Material-UI | - | - | - | - | - | - | - | next/link, next/head | - |
| 43 | with-semantic-ui | react | - | semantic-ui | - | - | - | - | - | - | - | next/head | - |
| 44 | with-mobx | react | styled-jsx | - | MobX | - | 標準httpサーバ | - | - | babel-plugin-transform-decorators-legacy | - | - | - |
| 45 | with-redux | react | styled-jsx | - | redux | - | - | - | - | - | - | next/link | - |
| 46 | with-refnux | react | - | - | refnux | - | - | - | - | - | - | next/link | - |
| 47 | using-router | react | styled-jsx | - | - | - | - | - | - | - | - | - | - |
| 48 | with-next-routes | react | - | - | - | - | 標準httpサーバ | next-routes | - | - | - | next/link | - |
| 49 | with-pretty-url-routing | react | - | - | - | - | express | next-url-prettifier | - | - | - | - | prop-types |
| 50 | with-shallow-routing | react | - | - | - | - | - | - | - | - | - | next/router, next/head | - |
| 51 | with-url-object-routing | react | - | - | - | - | 標準httpサーバ | path-match | - | - | - | next/link, next/router | - |
| 52 | with-amp | react | - | - | - | - | - | - | cat.jpg, dog.jpg | - | - | next/head | amp |
| 53 | with-jest | react | styled-jsx | - | - | - | - | - | - | next/babel | - | - | jest, enzyme |
| 54 | with-typescript | react | - | - | - | - | - | - | - | - | - | - | typescript |
| 55 | with-flow | react | - | - | - | - | - | - | - | babel-plugin-transform-flow-strip-types | - | next/link, next/head | flow |
| 56 | with-universal-configuration | react | - | - | - | - | - | - | - | babel-plugin-transform-define | - | - | - |
| 57 | with-webpack-bundle-analyzer | react | - | - | - | - | - | - | - | - | - | next/link | webpack-bundle-analyzer |
- react
- inferno
- preact
- aphrodite
- CSS-in-JS:
<div style={{ color: '#000' }}>のようなプレーンオブジェクトを使った方法を狭義で指しています。 - CSS Modules
- cxs
- fela
- glamor
- glamorous
- sass
- styled-components
- styled-jsx
- styletron
- Material-UI
- semantic-ui
- redux
- MobX
- refnux
- isomorphic-fetch
- Apollo
- socket.io
- 標準httpサーバ
- express
- hapi
- koa
- koa-router
- path-match
- i18next
- react-intl
- prop-types
- PostCSS
- Autoprefixer
- firebase
- React Helmet
- nprogress
- react-no-ssr
- lru-cache
- AMP(Accelerated Mobile Pages)
- jest
- enzyme
- typescript
- flow
- webpack-bundle-analyzer
概要
with-external-scoped-css
外部のcss系ファイルを使ったサンプル。less, scss, sassなども使える。
ちなみにこのexmapleの場合、開発用コマンドはyarn devじゃなく yarn start。
data-fetch
GithubのREST APIでリポジトリのスター数を表示している。
with-apollo
GraphQLでデータの取得・追加・更新を行っている。
with-firebase
ログイン・ログアウトやデータ取得を行っている。
Firebaseのcredentialsをcredentials/client.js、データベースのURLをcredentials/server.jsに設定する。
with-socket.io
socket.ioで、簡素なチャットを実装している。複数ブラウザあるいは複数タブを開いた状態で、メッセージ送信すると他方にも表示される。
ちなみに送信メッセージはサーバのメモリ上に保持しているようなので、ブラウザをリロードしても送信メッセージは復元されるが、サーバを再起動すると送信メッセージもクリアされる。
server.jsでsocket周りの設定を行っている。
layout-component
上部がナビゲーションエリア、下部がフッターで、中部が可変エリアのようなレイアウトのサンプル。
shared-modules
モジュールと変数を共有している。stateやpropsではなく外部の変数を使うことで異なるコンポーネント間で変数を共有している。
ちなみに、それだけだと表示が更新されないためforceUpdateで強制更新している。
root-static-files
静的ファイルをサーブしている。
svg-components
svgファイルを直接読み込んで、コンポーネントのように扱っている。
with-loading
ページ読み込み時にページ上端にプログレスバーが表示される。
with-prefetching
Linkコンポーネントにprefetchプロパティを指定することで簡単にprefetchしてくれる。
progressive-render
普通のサーバサイドレンダリング(SSR)とSSRしない部分のサンプル。
サーバサイドでは「Loading...」とレンダリングし、クライアントサイドで書き換えられる。
ssr-caching
SSRキャッシングのサンプル。サーバサイドでレンダリングした際にキャッシュし次回以降はキャッシュを使うようにしている。
parameterized-routing
/foo/:idのようなルーティングの仕方。
using-inferno
開発時はホットローディングのためにReactを使うようになっている。react→infernoのエイリアスを使うことで環境に応じて切り替わるようにしている。
using-preact
開発時はホットローディングのためにReactを使うようになっている。react→preactのエイリアスを使うことで環境に応じて切り替わるようにしている。
with-i18next
static/locales配下に辞書ファイル(json)が置かれており、pages/index.jsでfetchされる。
with-material-ui
Material-UIを使ったサンプル。テーマやボタン、ダイアログを使っている。
with-react-md
material designのコンポーネントを使ったサンプル。ツールバーやナビゲーションドロワーを使っている。
with-semantic-ui
下の画像のようにリストとモーダルを表示している。
サンプルをそのまま動かすと、semantic-uiのバージョンのせいか2点ワーニングが出る。
-
<Modal trigger={<Button>Show Modal</Button>}>でサーバサイドレンダリングとクライアントサイドで異なる旨のワーニングが出るがその原因が分からなかった。triggerプロパティが原因のようだったので、ボタンを外に出しthis.state.openをコントロールするようにし、<Modal open={this.state.open}>のようにして回避。 -
<List vertical relaxed>が、現在のバージョンではverticalプロパティがなく、縦並びが標準となっているので、verticalを削除。(横並びにしたいときだけhorizontalを指定)
with-mobx
状態を管理するサンプル。
store.jsが作られて、ここにobservableな値やactionを持ったStoreを作っている。
with-redux
カウンターと時計の実装。
reduxではstore, reducer, actionのディレクトリを分けること構成が多いと思うけど、このサンプルでは store.js に全てまとめている。
with-refnux
カウンターの実装。
ちなみにこのexmapleの場合、開発用コマンドはyarn devじゃなく yarn next。
with-shallow-routing
Router.push のオプション{ shallow: true } の有無の違いを、getInitialPropsの実行回数とカウンタで表している。{ shallow: true } を指定した場合にはgetInitialPropsは実行されない。
with-jest
jestとenzymeを使ったテストのサンプル。
yarn testでテストが実行される。
with-typescript
設定ファイルtsconfig.jsonが作成され、pages/, components/配下がtypescriptで記述される。トランスパイルされたファイルは同じ場所に作成される。
with-universal-configuration
設定ファイルもユニバーサルにしていて、.babelrcで./env-config.jsの宣言を行っている。
SSRの場合でもCSRの場合でも設定ファイルが共通となっている。
with-webpack-bundle-analyzer
yarn devで起動するとバンドル情報が.next/stats.jsonに作成される。
次にyarn bundle:viewを実行するとブラウザが開き、下の画像のような各種サイズ情報等を視覚的に見ることができる。ズーム等もできる。
（ブラウザが開かない場合はhttp://127.0.0.1:8888にアクセス）
