Zenn
1️⃣

Next.jsとShadcn/UIで作るモダンWebアプリケーション(Part1)

2024/09/02に公開
Next.js
Node.js
webapp
解説
shadcn/ui
tech

Next.jsとShadcn/UIで作るモダンWebアプリケーションの解説

パート1: Next.jsとShadcn/UIの初期セットアップ

はじめに

このシリーズでは、Next.jsとShadcn/UIを使ってモダンなWebアプリケーションを開発する手順を解説していきます。今回のパート1では、開発環境の準備と、基本的なセットアップについて説明します。この記事を読み終える頃には、Next.jsのプロジェクトが作成され、Shadcn/UIのコンポーネントが導入された状態で、開発がスタートできるようになります。

Node.jsの環境確認

まず、開発環境が適切に設定されているか確認しましょう。このプロジェクトでは、Node.jsのバージョン18.17以上が必要です。ターミナルを開いて、以下のコマンドを実行して現在のバージョンを確認してください。

node -v

もしバージョンが18.17未満の場合は、Node.js公式サイトから最新バージョンをダウンロードしてインストールしてください。

Next.jsプロジェクトの作成

次に、新しいNext.jsプロジェクトを作成します。以下のコマンドをターミナルで実行してください。

npx create-next-app@latest {your-name-app}

プロジェクトの設定に関する6つの質問が表示されますが、全てデフォルトのままで問題ありません。Enterキーを押すだけでプロジェクトの作成が完了します。

Shadcn/UIのインストール

次に、Shadcn/UIというコンポーネントライブラリをプロジェクトに導入します。手順は以下の通りです。

  1. Shadcn/UIのインストールページにアクセスし、Next.js用の手順を確認します。
  2. ターミナルで次のコマンドを実行します。
npx shadcn-ui@latest init

いくつかの設定項目がありますが、以下のように選択してください。

  • Shadcnをインストールするかどうか尋ねられたら「y」と入力。
  • スタイルとして「New York」を選択。
  • カラーは「Slate」を選択。
  • global CSSの場所を指定する際は、そのままEnterを押してデフォルトを使用。
  • CSS Variablesは「yes」を選択。

これでShadcn/UIのインストールが完了しました。

サーバーの起動と動作確認

インストールが完了したら、まずサーバーを起動して、すべてが正常に動作しているか確認します。ターミナルで以下のコマンドを実行してください。

npm run dev

ブラウザでhttp://localhost:3000にアクセスし、サーバーが正しく動いていることを確認します。

基本的なShadcn/UIの使用

最後に、Shadcn/UIの基本的な使用例として、作成されたプロジェクトのpage.tsxファイルを編集してみましょう。

import { Button } from "@/components/ui/button"

export default function Home() {
  return (
      <Button>
          Click me
      </Button>
  );
}

保存してブラウザをリロードすると、「Click me」というボタンが表示されるはずです。これでShadcn/UIのコンポーネントが正しく動作していることを確認できます。

これでパート1が完了です。次回は、Next.jsのルーティングやAppディレクトリの構造について詳しく解説していきます。お楽しみに！

著者について

このシリーズを執筆しているtakumi0706です。金沢大学で電子情報通信を学んでおり、現在はフロントエンドおよびバックエンド開発に注力しています。技術的な挑戦を続ける中で学んだことをアウトプットすることを大切にしています。

これからも技術的な知見を深め、共有していくことを目指していますので、ぜひフォローやフィードバックをお寄せください。


takumi0706

Discussion