Zenn
👶

Next × Supabaseでtodoリスト作ってみた

2023/09/21に公開
Next.js
Supabase
tech

はじめに

初投稿です。Nextjsの勉強をしたく、とりあえず手を動かしながら慣れていきたかったのでtodoリストを作成しました。ついでにSupabaseやtailwindなんかも初めて触りました。こちらの記事はその備忘録です。

開発環境

  • Macbook Air M1
  • VScode
  • Next 13.4.19（appディレクトリ）
  • React 18.2.0
  • typescript 5.2.2
  • tailwindcss 3.3.3
  • yarn 1.22.19
  • node 18.14.1
  • supabase
  • NextUI

環境構築

npx create-next-app@latest

を叩くだけでNextのプロジェクトが作成できた。しゅごい。。。
ちなみにコマンドを叩いた後はこんな感じ。基本的に個人開発は全部この回答で良いかも。

プロジェクトの作成が終わったら、該当のディレクトリに移動して、yarn devを叩けばhttp://localhost:3000/　でNextの初期画面を確認できる。

NextUIのインストール

プロジェクトの作成ができたら次はNextUIをインストールする。インストールは下記コマンドでできる。

yarn add @nextui-org/react framer-motion

インストールが終わったらtailwindcssの設定を行う。（NextUIとtailwindcssを連携させるのに必要らしい）

tailwind.config.jsを下記のように更新する。

// tailwind.config.js
const {nextui} = require("@nextui-org/react");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ...
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()],
};

次にProviderを設定する。app/providers.tsxを開き、下記のように編集する。

// app/providers.tsx
'use client'

import {NextUIProvider} from '@nextui-org/react'

export function Providers({children}: { children: React.ReactNode }) {
  return (
    <NextUIProvider>
      {children}
    </NextUIProvider>
  )
}

app/providers.tsxの編集が終わったら、app/layout.tsxを開き、下記のように編集する。（要は{children}をProvidersで囲えば良い）

// app/layout.tsx
import {Providers} from "./providers";

export default function RootLayout({children}: { children: React.ReactNode }) {
  return (
    <html lang="en" className='dark'>
      <body>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  );
}

これでNextUIを使用する準備はOK！
詳しくは公式を参照。

Supabaseの設定

最初にSupabaseのサイト側で設定を行います。

プロジェクトの作成

まずはhttps://app.supabase.ioにアクセスし、アカウント作成を行います。
自分はGithubアカウントでサインインしました。
サインインできたらプロジェクトを作成します。ダッシュボード画面に「New project」というボタンがあると思うので、それをクリックします。
下記のような画面になったら必要な項目を埋めます。パスワードは忘れないようにメモしておくこと！

Tableの作成

プロジェクトが作成できたら、下記のようなプロジェクトのダッシュボード画面に入れると思います。
サイドメニューからTable Editorを選択し、Tableを作成します。

多分画面に従ってれば問題なく作れるので、詳しい作成手順は割愛😌（書くのがめんどくさいだけ）

supabasejsのインストール

下記コマンドでsupabasejsをインストールします。

yarn add @supabase/supabase-js

次に.env.localを編集します。

NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

YOUR_SUPABASE_URLとYOUR_SUPABASE_ANON_KEYは下記のダッシュボードの画面で確認できます。

supabaseのAPIの使用

APIを使用するにあたっての初期化方法が下記のダッシュボードの画面にあるので参考にします。

また、同じ画面からDBに対する処理（CRUD）のやり方も確認できます。
これでようやくNextからsupabaseのDBにアクセスできるようになりました。

todoリスト作成（プログラミング）

上記までの準備を済ませるとNextUIとsupabaseのDBとtailwind（create-next-appがよしなにやってくれたので何もしていない）を使用して開発ができるようになります。
実際に自分が書いたコード等も載せて復習したかったが、ここまで書くので疲弊したのでGithubだけ載せます😇

https://github.com/sigunamu226/todo-practice

ちなみにこんな感じに出来上がりました。（認証も作る気でログアウトボタン設定したけど、認証は作ってないよ🤮）

さいごに

今回は初めてNextでSupabaseを使ってtodoリストを作ってみましたが、思ったよりも設定とか簡単でSupabaseとかその他諸々すげぇって思いました。（小並）
tailwindも記事では触れませんでしたが、ドキュメントと睨めっこしながら書いてました。個人開発で使う分には楽かもなぁという感想です。
今回は認証やVercelにデプロイして公開等はしませんでしたが、次は取り組もうと思います。

そして、記事書くのって大変だ。。。みんなみたいに分かりやすく記事を書けるようになりたい。。。

それでは、シーユーバイバイ👋

Discussion