Posted at

Create Next Appのexampleまとめ

More than 1 year has passed since last update.

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


概要


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


layout-component

上部がナビゲーションエリア、下部がフッターで、中部が可変エリアのようなレイアウトのサンプル。


shared-modules

モジュールと変数を共有している。statepropsではなく外部の変数を使うことで異なるコンポーネント間で変数を共有している。

ちなみに、それだけだと表示が更新されないため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

with-react-md-2.png


with-semantic-ui

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

with-semantic-ui-1.png

with-semantic-ui-2.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