mottox2 blog

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

dev

日本国内で、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』という名前でセットアップを行います。
ターミナルで次のコマンドを実行し、プロジェクト用のディレクトリを作成しましょう。

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

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

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

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

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

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

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

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」と表示されればセットアップは完了です。

B!
event

PowerPointで挑んだ「WeJS Festival !」参戦レポ

We are JavaScripters、略してWeJS。そんなWeJSが3周年ということで「WeJS Festival!」というイベントが開催されました:tada: そんな、超イケイケなフェスに

book

OOXMLと向き合う人にオススメな「Office Open XMLフォーマットガイド」を読んだ

最近、PowerPointファイルを生成するツールを作っています。 「PowerPointを作る」というと難しいと思われるかもしれません。しかし、OOXMLという仕様に従いXMLを作ってZIP形式で

event

『転職透明化らぼ』で個人の技術ブランディングについて話してきた

先日、『転職透明化らぼ』というイベントに参加してきました。 転職透明化らぼは転職に関わる情報を透明化して企業・個人双方にとってよりよい転職が増えることに貢献するのが目的です。 今回のテーマは『技術

lt