Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

Next.jsをTypeScriptで始めてみる | Next.js 12.x その0001

参考にさせていただいたページ

create next-appする

作業ディレクトリを作成します。

mkdir next-js-sample

公式の「Getting Started」の「Automatic Setup」の通りに以下のコマンドを実行してみます。

yarn create next-app --typescript

プロジェクト名を聞かれるので、デフォルトのままmy-appでエンターしてみます。

以下のようなディレクトリ構造でNext.jsのアプリケーションが生成されました。

next-js-sample/my-app/*

devで起動する

移動します。

cd my-app/

yarn devします。

yarn dev

ブラウザで http://localhost:3000/ にアクセスするとNext.jsのスタートページが表示されました。

バージョンなど

生成されたpackage.jsonを見ると以下のバージョンでした。

  • "next": "12.1.6",
  • "react": "18.2.0",
  • "react-dom": "18.2.0"

learn course について

公式ドキュメントの冒頭に以下のようにあるので、とりあえず learn course というのをやってみようと思います。

英語

Welcome to the Next.js documentation!

If you're new to Next.js, we recommend starting with the learn course.

The interactive course with quizzes will guide you through everything you need to know to use Next.js.

If you have questions about anything related to Next.js, you're always welcome to ask our community on GitHub Discussions.

日本語

Next.jsドキュメントへようこそ!

Next.jsを初めて使用する場合は、学習コースから始めることをお勧めします。

クイズ付きのインタラクティブコースでは、Next.jsを使用するために知っておく必要のあるすべてのことをガイドします。

Next.jsに関連する質問がある場合は、GitHubディスカッションでいつでもコミュニティに質問してください。