TypeScriptで始めるNext.js 1: セットアップ

2019.11.11

日本国内で、SPAをベースにしたフレームワークはVueベースのNuxt.jsが有名です。しかし、Nuxt.jsはNext.jsというReactをベースにしたフレームワークを参考に作られたものです。本連載は（影の薄い）React.jsのフレームワーク『Next.js』を使うにあたって基本的な事項を抑えることを目標としていきます。技術書典で向けた文章の素振りも目的としています。

環境

Node.js v8以降がインストールされていること
Next.js 9.x系

プロジェクトのセットアップ

セットアップ方法の選択

Next.jsのアプリケーションを立ち上げるには次の方法が用意されています。

CLIツール『create-next-app』によるセットアップ
手動によるセットアップ

お手軽なのは前者のcreate-next-appを使ったセットアップ方法です。create-next-appはプロジェクトの雛形を展開してくれるCLIツールです。ただし、create-next-appで採用されている標準テンプレートには、Next.jsの開発元であるZEIT社が開発しているstyled-jsxというCSS in JSライブラリが採用されています。しかし、残念なことにCSS in JSはReact界隈での採用例も少ないため、詰まった時が大変です。そういった理由から、筆者は手動でセットアップする方法を推奨しています。

手動のセットアップ

今回は『first-next-app』という名前でセットアップを行います。ターミナルで次のコマンドを実行し、プロジェクト用のディレクトリを作成しましょう。

$ mkdir first-next-app
$ cd first-next-app

このコマンドを実行し、first-next-app/package.jsonが生成されていることを確認しましょう。この時点でfirst-next-appディレクトリをVSCodeで開いておきましょう。

packge.jsonに次の記述を追記しましょう。

  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }

続いて、Next.jsを動かすのに必要なライブラリをインストールします。ターミナルで次のコマンドを実行しましょう。

$ npm install react react-dom next
$ npm install -D typescript @types/react @types/node

また、最初に表示するコンポーネントを作成します。pagesディレクトリを作成し、次のようなpages/index.tsxを作成してください。

const Index = () => (
  <div>
    <p>Hello Next.js</p>
  </div>
);

export default Index;

これでページを表示する準備が整いました。次のコマンドを実行して開発サーバーを起動してみましょう。

$ npm run dev
[ info ]  bundled successfully, waiting for typecheck results...
[ ready ] compiled successfully - ready on http://localhost:3000

しばらく待ち、ready表示されたら「http://localhost:3000」をブラウザで開いてみましょう。「Hello Next.js」と表示されればセットアップは完了です。

Xでシェア