# Next.js + React + TailwindCSS
npm install next react react-dom
# TailwindCSS (UI用)
npm install -D tailwindcss postcss autoprefixer
# 型サポート (TypeScript推奨)
npm install -D typescript @types/react @types/node
Strapi は独立したアプリとして動きます(Node.jsベース)。
# Strapi 新規プロジェクト作成 (sqlite版でお試し)
npx create-strapi-app@latest my-strapi --quickstart
これで http://localhost:1337/admin に管理画面が立ち上がります。
管理者ユーザーを作って、Announcement コンテンツタイプを作成してください。
Next.js 側から Strapi を叩くために追加で必要なのは特にありません(fetch で十分)。
※将来 GraphQL を使うなら:
npm install @apollo/client graphql
Next.js プロジェクト作成
npx create-next-app@latest temple-app
cd temple-app
TailwindCSS セットアップ
npx tailwindcss init -p
tailwind.config.js の content に以下を追加:
content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"]
globals.css に以下を追加:
@tailwind base;
@tailwind components;
@tailwind utilities;
Strapi プロジェクト作成
npx create-strapi-app@latest temple-cms --quickstart
→ 管理画面にログインして Announcement モデルを作成。