Create Next Appのexampleまとめ

[Create React App](https://github.com/facebookincubator/create-react-app)と同様に、[Create Next App](https://open.segment.com/create-next-app)を使うとNext.jsのアプリケーションの雛形が簡単に作成できます。
作成時に指定できるexampleも豊富で約60種類もあります。一方でexampleが多すぎて、どれを参考にすればいいか分からない（見ていくのが大変）という問題があるかと思います。
そのためexampleごとの技術要素、構成、概要等をざっくりまとめてみました。
exampleとは

```sh
$ 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](#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](#data-fetch) |	react	|	-	|	-	|	-	|	isomorphic-fetch(REST API)	|	-	|	-	|	-	|	-	|	-	|	next/link	|	-	|
|	21	| [with-apollo](#with-apollo) |	react	|	styled-jsx	|	-	|	-	|	Apollo(GraphQL)	|	-	|	-	|	-	|	-	|	-	|	next/link	|	prop-types	|
|	22	| [with-firebase](#with-firebase) |	react	|	-	|	-	|	-	|	isomorphic-fetch(REST API)	|	express	|	express	|	-	|	-	|	-	|	-	|	firebase	|
|	23	| [with-socket.io](#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](#layout-component) |	react	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	next/link, next/head	|	-	|
|	27	|	nested-components	|	react	|	styled-jsx	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|
|	28	| [shared-modules](#shared-modules) |	react	|	CSS-in-JS	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|
|	29	| [root-static-files](#root-static-files) |	react	|	-	|	-	|	-	|	-	|	標準httpサーバ	|	if文による分岐	|	favicon.icon, robots.txt, sitemap.xml	|	-	|	-	|	-	|	-	|
|	30	| [svg-components](#svg-components) |	react	|	styled-jsx	|	-	|	-	|	-	|	-	|	-	|	-	|	babel-plugin-inline-react-svg	|	-	|	-	|	-	|
|	31	| [with-loading](#with-loading) |	react	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	next/link, next/head	|	nprogress	|
|	32	| [with-prefetching](#with-prefetching) |	react	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	next/link	|	-	|
|	33	| [progressive-render](#progressive-render) |	react	|	styled-jsx	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	react-no-ssr	|
|	34	| [ssr-caching](#ssr-caching) |	react	|	-	|	-	|	-	|	-	|	express	|	-	|	-	|	-	|	-	|	next/link	|	lru-cache	|
|	35	| [parameterized-routing](#parameterized-routing) |	react	|	-	|	-	|	-	|	-	|	標準httpサーバ	|	path-match	|	-	|	-	|	-	|	-	|	-	|
|	36	| [using-inferno](#using-inferno) |	inferno	|	-	|	-	|	-	|	-	|	標準httpサーバ	|	-	|	-	|	-	|	-	|	next/link	|	-	|
|	37	| [using-preact](#using-preact) |	preact	|	-	|	-	|	-	|	-	|	標準httpサーバ	|	-	|	-	|	-	|	-	|	next/link	|	-	|
|	38	| [with-i18next](#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](#with-material-ui) |	react	|	CSS-in-JS	| Material-UI	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|
|	42	|	[with-react-md](#with-react-md) |	react	|	CSS-in-JS	|	Material-UI	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	next/link, next/head	|	-	|
|	43	|	[with-semantic-ui](#with-semantic-ui) |	react	|	-	|	semantic-ui	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	next/head	|	-	|
|	44	|	[with-mobx](#with-mobx) |	react	|	styled-jsx	|	-	|	MobX	|	-	|	標準httpサーバ	|	-	|	-	|	babel-plugin-transform-decorators-legacy	|	-	|	-	|	-	|
|	45	|	[with-redux](#with-redux) |	react	|	styled-jsx	|	-	|	redux	|	-	|	-	|	-	|	-	|	-	|	-	|	next/link	|	-	|
|	46	|	[with-refnux](#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](#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](#with-jest)	|	react	|	styled-jsx	|	-	|	-	|	-	|	-	|	-	|	-	|	next/babel	|	-	|	-	|	jest, <br>enzyme	|
|	54	|	[with-typescript](#with-typescript)	|	react	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	typescript	|
|	55	|	with-flow	|	react	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	babel-plugin-transform-flow-strip-types	|	-	|	next/link, next/head	|	flow	|
|	56	|	[with-universal-configuration](#with-universal-configuration)	|	react	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	babel-plugin-transform-define	|	-	|	-	|	-	|
|	57	|	[with-webpack-bundle-analyzer](#with-webpack-bundle-analyzer)	|	react	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	-	|	next/link	|	webpack-bundle-analyzer	|

* [react](https://facebook.github.io/react/)
* [inferno](https://infernojs.org/)
* [preact](https://preactjs.com/)
* [aphrodite](https://github.com/Khan/aphrodite)
* CSS-in-JS: `<div style={{ color: '#000' }}>`のようなプレーンオブジェクトを使った方法を狭義で指しています。
* [CSS Modules](https://github.com/css-modules/css-modules)
* [cxs](http://jxnblk.com/react-cxs/)
* [fela](https://github.com/rofrischmann/fela/tree/master/packages/react-fela)
* [glamor](https://github.com/threepointone/glamor)
* [glamorous](https://github.com/paypal/glamorous)
* [sass](http://sass-lang.com/)
* [styled-components](https://styled-components.com/)
* [styled-jsx](https://github.com/zeit/styled-jsx)
* [styletron](http://styletron.js.org/)
* [Material-UI](http://www.material-ui.com/#/)
* [semantic-ui](https://semantic-ui.com/)
* [redux](http://redux.js.org/)
* [MobX](https://mobx.js.org/)
* [refnux](https://github.com/algesten/refnux)
* [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch)
* [Apollo](http://dev.apollodata.com/react/)
* [socket.io](https://socket.io/)
* [標準httpサーバ](https://nodejs.org/api/http.html#http_http_createserver_requestlistener)
* [express](https://expressjs.com/)
* [hapi](https://hapijs.com/)
* [koa](http://koajs.com/)
* [koa-router](https://github.com/alexmingoia/koa-router)
* [path-match](https://github.com/pillarjs/path-match)
* [i18next](http://i18next.com/)
* [react-intl](https://github.com/yahoo/react-intl)
* [prop-types](https://github.com/facebook/prop-types)
* [PostCSS](http://postcss.org/)
* [Autoprefixer](https://github.com/postcss/autoprefixer)
* [firebase](https://firebase.google.com)
* [React Helmet](https://github.com/nfl/react-helmet)
* [nprogress](http://ricostacruz.com/nprogress/)
* [react-no-ssr](https://github.com/kadirahq/react-no-ssr)
* [lru-cache](https://github.com/isaacs/node-lru-cache)
* [AMP(Accelerated Mobile Pages)](https://www.ampproject.org/ja/)
* [jest](https://facebook.github.io/jest/)
* [enzyme](http://airbnb.io/enzyme/)
* [typescript](https://www.typescriptlang.org/)
* [flow](https://flow.org/)
* [webpack-bundle-analyzer](https://github.com/th0r/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周りの設定を行っている。

![with-socket.io.png](https://qiita-image-store.s3.amazonaws.com/0/25588/3f635427-010b-9d5a-1d1b-727ac58d8d03.png)


## 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-react-md-1.png](https://qiita-image-store.s3.amazonaws.com/0/25588/18631b19-9cf3-3685-6ab4-3dc5d878bfb6.png)

![with-react-md-2.png](https://qiita-image-store.s3.amazonaws.com/0/25588/1df51233-72c0-8026-0ed4-14cbeb539e80.png)


## with-semantic-ui

下の画像のようにリストとモーダルを表示している。

![with-semantic-ui-1.png](https://qiita-image-store.s3.amazonaws.com/0/25588/2a6a0f66-a934-cde4-e2a3-f1b1c312cc39.png)

![with-semantic-ui-2.png](https://qiita-image-store.s3.amazonaws.com/0/25588/3c2d4227-fb31-aa3a-4375-b73702eab304.png)

サンプルをそのまま動かすと、semantic-uiのバージョンのせいか2点ワーニングが出る。

1. `<Modal trigger={<Button>Show Modal</Button>}>`でサーバサイドレンダリングとクライアントサイドで異なる旨のワーニングが出るがその原因が分からなかった。`trigger`プロパティが原因のようだったので、ボタンを外に出し`this.state.open`をコントロールするようにし、`<Modal open={this.state.open}>`のようにして回避。
2. `<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`にアクセス）

![with-webpack-bundle-analyzer.png](https://qiita-image-store.s3.amazonaws.com/0/25588/5f3e8c84-cf1e-dc84-fe2f-0f9a437c8c1d.png)