create-next-appで簡単にNextアプリを作成しよう【React】

先日LTでNext.jsはいいぞという話をしてきました。Next.jsはいいぞ

React × 飲み放題 の初心者勉強会で初LTをした話【BeerBash】

そんなNext.jsですが、とても簡単に導入できる方法があります、create-next-appです。公式はこちら

create-react-appはReactを触ったことのある方ならみなさんご存知かと思いますが、それのNextバージョンとなります。

つまり、コマンド1つでNext.jsアプリケーションに必要な最小限の雛形を作成してくれるツールです、便利ですね。

 

早速使い方を見ていきましょう。まずインストールはこちら

$ npm install -g create-next-app

create-next-appのいいところは、雛形が用途に応じて何種類も用意されており自分のアプリケーションに合わせた雛形を作ることができるところです。

docker用のwith-dockerや、flow用のwith-flowなど、豊富な雛形が用意されています。こちらで確認できます。

一番古いものでも2ヶ月前更新と比較的新しいため、Githubでサンプルコードを見ようとしたら1 years agoでこれ大丈夫かな…みたいな心配もありません。

 

今回私はNext.jsへのReduxの実装を確認するためにcreate-next-appを利用したかったので、with-redux を使って作成していきます。

雛形の指定は、--sample 使いたいサンプル名というオプションで指定することができます。実際のコマンドはこちら

$ create-next-app --example with-redux my-app

これで最低限の構成が作られたので、my-appに移動してnpm run devすることでlocalhost:3000からサンプルが確認できます。

create-next-app

毎秒カウントアップされるデジタルクロックと、ボタンをクリックすることでカウントを増減できるカウンターがデフォルトで実装されています。

簡単な実装になっているため、ソースを見ればなんとなく理解できるのでここから変更を加えていって自分の作りたいアプリケーションを作成するのは比較的楽に行えるかなと思います。

 

Next.jsを実装してみたいけど、とりあえず実際に動くサンプルが見てみたいかたや、私のようにNext.jsへの◯◯の実装方法がわからないからサンプルを見てみたい…という方、またはプロジェクトのスタートをもっと楽にしたいという方はぜひcreate-next-app、使ってみてはいかがでしょうか。

 

Next.jsの記事はこちら

Next.jsを使ってSSRを始めよう【初心者向け】