このチャプターの目次
プロジェクト作成
Next.js のプロジェクトを作成します。
nextjs-supabase-blog-tutorialフォルダを開いています。
npx create-next-app@latest --example with-tailwindcss . --use-npm
--example with-tailwindcssはオプションは TailwindCSS の設定がすでに組み込まれているプロジェクトになります。
App Directory 設定
App Directory の機能を使用するため、next.config.jsに設定を追加します。
/** @type {import('next').NextConfig} */
module.exports = {
reactStrictMode: true,
experimental: {
appDir: true,
},
}
ライブラリインストール
各ライブラリをインストールします。
npm i @supabase/auth-helpers-nextjs @supabase/supabase-js @types/uuid date-fns server-only sharp supabase uuid zustand
npm i -D encoding
チュートリアルは下記のバージョンで実施してます。
もし最新のバージョンで動かない場合は、下記のバージョンに合わせてください。
{
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"@supabase/auth-helpers-nextjs": "^0.5.4",
"@supabase/supabase-js": "^2.4.1",
"@types/uuid": "^9.0.0",
"date-fns": "^2.29.3",
"next": "13.1.4",
"react": "18.2.0",
"react-dom": "18.2.0",
"server-only": "^0.0.1",
"sharp": "^0.31.3",
"supabase": "^1.34.5",
"uuid": "^9.0.0",
"zustand": "^4.3.2"
},
"devDependencies": {
"@types/node": "18.11.3",
"@types/react": "18.0.21",
"@types/react-dom": "18.0.6",
"autoprefixer": "^10.4.12",
"encoding": "^0.1.13",
"postcss": "^8.4.18",
"tailwindcss": "^3.2.4",
"typescript": "4.9.4"
}
}
確認
インストールに問題ないか確認します。
npm run dev
サーバーを止めておきます。
Ctrl + C