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

dev

ウェブ技術で縦書きを含む画像を生成したい

ここ最近、Web技術を利用した画像生成に興味があります。本記事では、日本語における表現の一種である縦書きに焦点を当て、Web技術を使った縦書きを含む画像生成方法についての調査をまとめました。 > 現

blog

Netlify Formsで問い合わせフォームを作ったら簡単だった

追記(2022/12/29): 問い合わせに対応する窓口をTwitterに統一したいので、フォームページは削除しました。 当ブログは静的サイトホスティングサービスのNetlifyでホスティングされ

netlify
dev

翻訳でHacktoberfestに参加しました

毎年10月に開催されるHacktoberfestに参加しました。このイベントはOSSへの貢献を行い、期間中に規定数(4つ)の貢献を行った人に特典がプレゼントされるものになっています。 自分はドキュメ

Copyright © 2023 @mottox2 All Rights Reserved.