Skip to content
This repository has been archived by the owner on Sep 17, 2024. It is now read-only.

nonoakij/next-js-hands-on

Repository files navigation

Next.js Hands-on

このリポジトリについて

このリポジトリは、Next.js を使った開発を学ぶためのハンズオンです。 対象者は、Next.js において、公式の Learn を読んでいることを前提としています。(ドキュメントについては詳しく読了している必要はありません。)

構成

モノレポの構成になっています。 大きく4つパッケージで構成されています。

  • apps/solution : 今回のハンズオンの完成した時の実装があります。このパッケージは、参考用です。
  • apps/workspace : 今回のハンズオンで作業するパッケージです。主にこのパッケージを編集していきます。
  • docs : 今回のハンズオンの進め方が書かれています。
  • backend : Backend の実装です。今回のハンズオンでは、このパッケージを編集することはありません。

セットアップ

このリポジトリをクローンしてください。

https

git clone https://github.com/nonoakij/next-js-hands-on.git

ssh

git clone [email protected]:nonoakij/next-js-hands-on.git

gh

gh repo clone nonoakij/next-js-hands-on

プロジェクトディレクトリに移動してください

cd next-js-hands-on

依存関係をインストールしてください

pnpm install

Note

このプロジェクトは pnpm を使用しています。 pnpm をインストールしていない場合は、以下のコマンドでインストールしてください。

brew

brew install pnpm

npm

npm install -g pnpm

その他のインストール方法は、pnpm 公式サイトを参照してください。

開発サーバーを起動してください

pnpm run dev

ブラウザで以下の URL にアクセスできることを確認してください

これで準備は完了です

Hands-onを進めていきましょう!

進め方については、Github Pages でホスティングされているDocumentを参照してください。

https://nonoakij.github.io/next-js-hands-on/

scripts 一覧

script description
pnpm run dev すべてを起動します
pnpm run dev:workspace workspaceのみを起動します
pnpm run dev:solution solutionのみを起動します
pnpm run dev:docs docsのみを起動します
pnpm run dev:backend backendのみを起動します
pnpm run hands-on workspace と backend を起動します
pnpm run build ビルドします
pnpm run start ビルドしたアプリケーションを起動します
pnpm run lint lint を実行します
pnpm run format format を実行します
pnpm run check lint と format を実行します
pnpm run type-check 型チェックを実行します