Zenn
🎉

Next.js × TypeScript × TailwindCSS × Supabaseセットアップ

2021/10/09に公開
Next.js
TypeScript
Tailwind CSS
supabase
tech

初投稿の記事になります。
Next.js TypeScript TailwindCSS Supabaseを組み合わせたセットアップについて書いていきます。

Next.js × TypeScript × TailwindCSSの設定

● Next.js × TypeScriptの導入。

ターミナル
yarn create next-app --typescript

● TailwindCSS の導入

ターミナル
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

● tailwind.config.jsファイルの編集

tailwind.config.js
module.exports = {
- purge: [],
+ purge: ["./src/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

● srcフォルダの追加

  1. トップ階層にsrcフォルダを作成し、srcフォルダ内にpageフォルダを入れ込む。
  2. styleフォルダはその際に削除。

● _app.tsxの編集

src/page/_app.tsx
- import '../styles/globals.css'
+ import ’tailwindcss/tailwind.css’
  import type { AppProps } from ’next/app’
  function MyApp({ Component, pageProps }: AppProps) {
    return <Component {...pageProps} />
  }
　 export default MyApp

● 絶対パスへの設定

tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
+   "baseUrl": "."
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Supabaseの設定

● Supabaseのプロジェクト作成

  1. ログイン
  2. ユーザのorganizationを選択。
  3. new project
  4. Create new projectから
    name(project名)、Database Password(password)、Region(Tokyo)を入力。

https://app.supabase.io/
● Supabaseの設定

ターミナル
yarn add @supabase/supabase-js
.env.local
NEXT_PUBLIC_SUPABASE_URL=(SupabaseのURL)
NEXT_PUBLIC_SUPABASE_KEY=(SupabaseのAPI Key)

srcフォルダ直下にlibsフォルダを作成し、supabase.tsを作成。

src/libs/supabase.ts
import { createClient } from "@supabase/supabase-js";

const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL;
const SUPABASE_KEY = process.env.NEXT_PUBLIC_SUPABASE_KEY;

export const client = createClient(SUPABASE_URL, SUPABASE_KEY);

最後に

これでNext.jsでSupabaseを使用することができるようになりました！
初めての記事なので読みにくい点など多々あるかと思いますが、
あくまでメモ用なのでご了承ください。

Discussion