ブログ開発のための基本設定を行います。
この記事で設定する内容は次のとおりです。
- Next.jsプロジェクトの作成
- Tailwind CSS(Shadcn/ui)の設定
👨💻
Node.js 18以降とnpmがインストールされている必要があります。
Next.jsプロジェクトを作るには、次のコマンドを実行します。
npx create-next-app@latest

すべて既定の設定で進めました。
プロジェクト名
を入力します。
TypeScript
を使うか選びます。
ESLint
を使うか選びます。
Tailwind CSS
を使うか選びます。
- **'src/'**ディレクトリを作るか選びます。
App Router
を使うか選びます。Next.js 13以降で利用できます。
- Pages Routerを使う場合は
No
を選びます。
絶対パスの設定
を変更するか選びます。
プロジェクトを作成したら、次のコマンドで追加パッケージを最新版にインストール、または更新します。
cd {프로젝트 이름}
npm install next@latest react@latest react-dom@latest
プロジェクトを実行するには、次のコマンドを使います。

この画面はsrc/app/page.tsxをレンダリングしたページです。
Shadcn/uiはTailwind CSSを使うUIライブラリです。
Shadcn/ui↗
次のコマンドでShadcn/uiをインストールします。
tailwind-mergeはShadcn/uiが使うプラグインです。
npx shadcn-ui@latest init
npm i tailwind-merge

既定の設定で進めました。
tailwindcss/typographyのインストール(任意) 🔗
Next.jsプロジェクトを作成した時点で、Tailwind CSSの基本設定は完了しています。
ただし、Tailwind CSSにはHTMLタグのスタイルをリセットする性質があるため、後でMarkdownを描画してもスタイルが適用されません。
これを解決するのが
proseです。
proseは
tailwindcss/typographyプラグインを使い、Markdownの描画にスタイルを適用します。
次のコマンドで
tailwindcss/typographyをインストールします。
npm i @tailwindcss/typography
tailwind.config.tsを開き、次のようにプラグインを追加します。
tailwind.config.tsmodule.exports = {
// ...
plugins: [
require('@tailwindcss/typography'),
// ...
],
// ...
}