create-next-app でNext.jsのアプリケーションを作る

目次

• create-next-app でNext.jsのアプリケーションを作る
  • 目次
  • Next.js とは
  • Next.js の特徴・機能
    • サーバーサイドレンダリング
    • CSS
    • ルーティング
  • Next.js のアプリケーション作成
    • create-next-app でアプリケーションの雛形作成
    • 静的ファイルビルド
    • 雛形の種類
  • 感想
  • 参考

Next.js とは

Next.jsはReactでサーバサイドレンダリング(SSR)を簡単に行えるようにするためのJavaScriptフレームワークです。
生成されるページを静的ページとして作成することも可能です。

私はもともと、Vue.jsのフレームワークであるNuxt.jsをよく使っていたので、Nuxt.jsの立ち位置であるという理解をするとわかりやすかったです。

Next.js の特徴・機能

Next.js のいくつかの機能を見ていきます。

サーバーサイドレンダリング

Next.js デフォルトでサーバサイドレンダリングができます。
SSRビルドした結果の静的ファイルも作成することができます。

公開するときは、NodeでSSRで動かしてもいいですし。
静的ページとして公開するので十分であれば、SSRでビルドした結果をCDNに乗せておくというような運用も可能です。

CSS

Next.js ではstyled-jsxが使えるようになっています。
コンポーネントに閉じたスコープでCSSを当てることができます。

Vue.js でいう スコープ付き CSS のようなことができるようになるという認識です。

export default () => (
  <div>
    <p>Hello World!</p>
    <style jsx>{`
    p {
      color: red;
    }
    `}</style>
  </div>
)

<style jsx>タグ内にCSSを書くとそのコンポーネントにのみ適用されるCSSを書くことができます。

ルーティング

Next.js では pages ディレクトリ以下がページを表示するためのスクリプトを配置する箇所になります。
ルーティングを書かずとも、pages以下のディレクトリ構成にそって、そのままルーティングができます。

また、ページ毎に自動的にコード分割されます。
ページに必要ないコードが無駄に読み込まれないようになっているようです。

pages/
├── index.js
└── users
    ├── hoge.js
    └── index.js

例えばこのようなディレクトリ構成になっていると

http:example.com/
http:example.com/users
http:example.com/users/hoge

特に自分でルーティングの処理を書かずとも、上記のようにアクセスできる、3つのページができることになります。

ただ、動的ルーティングに関しては、ディレクトリ構造だけではできないようです。その場合は自前で実装する必要があります。

Next.js のアプリケーション作成

それでは実際に Next.js のアプリケーションを作ってみましょう。

create-next-app でアプリケーションの雛形作成

アプリケーションを作るのはcreate-next-appというコマンドひとつで可能です。

yarn を使う場合

yarn create next-app my-app-name

npx を使う場合

npx create-next-app my-app-name

１つのコマンドでアプリケーションが立ち上がります。

以後、yarnで作った場合でこの記事では進めていきます。

デフォルトで作られたページを確認してみましょう。

cd my-app-name
yarn build
yarn dev

ローカルでサーバが立ち上がるのでアクセスして確認してみます
http://localhost:3000/

静的ファイルビルド

静的ファイルとして書き出す場合は下記コマンドを打てば可能です。

yarn build
yarn next export

outディレクトリ以下に生成されます。

CDN等にアップするときは、このoutディレクトリ以下をアップしてしまえばデプロイ完了となります。

雛形の種類

今回デフォルトの雛形を使いましたが、他にも数多くの雛形があります。

雛形の種類に関してはこちらを参照してください
next.js/examples at master · zeit/next.js

雛形の種類を選択してアプリケーションを作るには下記のように指定します。

create-next-app --example <雛形名> <アプリケーション名>

# 例)
create-next-app --example with-redux my-app

例の場合は、reduxを使いたい場合の指定です。

試しに作って実行し見ると下記のようなアプリケーションになります。

感想

create-next-app を利用することで、簡単にNext.jsを使ったアプリケーションを作ることができました。
1から作るより、雛形があるだけでもかなり便利なので、Next.jsでアプリを作るときは活用していきたいと思います。
雛形もかなりの種類用意されているので、勉強がや、参考にしたり、効率的な開発ができそうです。

参考

Create Next App
zeit/next.js: The React Framework