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!
dev

Next.jsのStatic Generationを追う際に参考にしたページ

Next.jsのStatic Generationを追っておく際に見たページをまとめた。簡単に要点をまとめてはいるが、詳しくはリンク先のオリジナルを見てほしい。 > 2019 in Review2

dev

リモート勤務なITエンジニアが分報で気をつけること

2020年になり誰もが予想しなかった速度で、人々の営みはオンライン上で行われるようになりました。もちろん仕事も例外ではありません。 そういった変化の中ではオンライン上のコミュニケーションがより重要

poen

うちでやりたい○つのこと

新型コロナウイルスの影響で外出が推奨されなくなって数週間がたった。 「自分は普段から引きこもりがちだ。大して影響はないだろう。」と構えていたが、日に日に後ろ向きの感情が強くなっているように感じている

うちにいよう
Copyright © 2019 @mottox2 All Rights Reserved.