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

events

技術書典10でReactとGatsbyJSの入門本を頒布します

技術書典10で『つのぶえ出版』としてReactとGatsbyJSの入門本を頒布予定です。 > どんな本かどんな本か 一言でいうと、React/Gatsbyでウェブサイトを書けるようになる本です

poem

欲しいものリスト(2020年版)

欲しいものはAmazonに売ってないので、独自にリストを作ることにしました。 - いい感じの動画を作るセンス 今年に入ってAfter Effectsを使ったアニメーションを作ったりしています。Tw

dev

jsx-presentationを使ってJSXでpptxファイルを生成する

週末にpptxファイルが生成できるスライド作成ツールのプロトタイプを作りました。 スライドエディタで作成したスライドをPowerPoint形式で出力できるようにした。 まだまだサイズやアスペクト

Copyright © 2019 @mottox2 All Rights Reserved.