Next.jsとTypeScriptの環境構築 | アントレプログラマー

Next.jsとTypeScriptの環境構築

Tech
2023.08.10

こんにちは、ニキです。

この記事はこんな方におすすめです。

  • create-next-appを使ってインストールする方法を知りたい
  • インストール時のオプションの選び方も理解したい

今回の記事では、Next.jsとTypeScriptの環境構築する方法を解説します。

Takaharu Niki
Takaharu Niki

・Webエンジニア6年目。
・バックエンドを中心に、フロントエンドやDevOps業務も経験。
・現在は、自社サービス企業のテックリードとして従事。

Takaharu Nikiをフォローする

環境情報

  • Chip: Apple M1
  • macOS: Ventura 13.2.1
  • Node.js: 20.5.0
  • npm: 9.8.0

Next.jsの環境情報

  • 13.4.13(2023/08/09時点の最新)

Next.jsとTypeScriptの環境構築

以下のようにNext.jsの新規プロジェクトを作ります。TypeScriptを使いたいので、—tsオプションを追加しています。my-appはお好きなプロジェクト名でOKです。

% npx create-next-app@13.4.13 my-app --ts

最新バージョンを取得したいなら以下のようにします。

% npx create-next-app my-app --ts

Next.jsプロジェクトを始める最も簡単な方法は create-next-app　を使うことです。このCLIツールはクイックスタートを可能にします。

The easiest way to get started with Next.js is by using create-next-app. This CLI tool enables you to quickly start building a new Next.js application, with everything set up for you.

引用 https://github.com/vercel/next.js/tree/canary/packages/create-next-app#create-next-app

以下のような対話形式でインストールします。１行ずつ見ていきます。

Ok to proceed? (y) y
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias? … No / Yes

ESLintをインストールするかを決めます。

✔ Would you like to use ESLint? … No / Yes

おすすめ：Yes

ESLintは静的解析ツールで、速やかに誤りを見つけます。多くのテキストエディターでの利用し、CIパイプラインで実行できます。

ESLint statically analyzes your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline.

引用 https://eslint.org/

公式ページへアクセスして見てもらえればイメージが湧くはずです。

Tailwind CSSをインストールするかを決めます。

✔ Would you like to use Tailwind CSS? … No / Yes

おすすめ：Yes

絶対的な正解はないので、好みでもいいと思います。Tailwind CSSはプロジェクトで利用されることも多い印象です。

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
TailwindCSSisautility-firstCSSframeworkforrapidlybuildingmodernwebsiteswithouteverleavingyourHTML.
tailwindcss.com

他の選択肢として以下がNext.js公式ページに記載があります。

  • Global CSS: Simple to use and familiar for those experienced with traditional CSS, but can lead to larger CSS bundles and difficulty managing styles as the application grows.
  • CSS Modules: Create locally scoped CSS classes to avoid naming conflicts and improve maintainability.
  • Tailwind CSS: A utility-first CSS framework that allows for rapid custom designs by composing utility classes.
  • Sass: A popular CSS preprocessor that extends CSS with features like variables, nested rules, and mixins.
  • CSS-in-JS: Embed CSS directly in your JavaScript components, enabling dynamic and scoped styling.
引用 https://nextjs.org/docs/app/building-your-application/styling

srcディレクトリを使うかを決めます。

✔ Would you like to use `src/` directory? … No / Yes

おすすめ：No

個人的な好みだと思います。以下のようになります。

  • Yes: my-app/app/
  • No: my-app/app/src/

App Routerを使うかを決めます。

✔ Would you like to use App Router? (recommended) … No / Yes

おすすめ：Yes

Next.jsは2つの異なるルーターを持っています。それは、App RouterとPage Routerです。App Routerは新しいルーターでServer ComponentsやStreamingのようなReactの最新機能を使えます。

Next.js has two different routers: the App Router and the Pages Router. The App Router is a newer router that allows you to use React’s latest features, such as Server Components and Streaming.

引用 https://nextjs.org/docs#app-router-vs-pages-router

デフォルトインポートエイリアスをカスタマイズするかを決めます。

✔ Would you like to customize the default import alias? … No / Yes

おすすめ：No

こだわりがなければNoでいいと思います。

Next.jsの動作確認

プロジェクトのルートディレクトリへ移動し、開発サーバーを起動します。

% cd my-app

% npm run dev

http://localhostへアクセスし、以下のように表示されればOKです。

まとめ

今回の記事では、Next.jsとTypeScriptの環境構築する方法を解説しました。

タイトルとURLをコピーしました