ローカル開発環境とリモートサーバーをつなげる。

supabase link --project-ref <project-id>

supabase link --project-ref ********* -p ******

• pはリモートサーバーのデータベースパスワードのオプション

migration newコマンドを使用する

supabase migration new [マイグレーションファイルの接尾語]

例

supabase migration new test001

を実行すると

[タイムスタンプ]_[マイグレーションファイルの接尾語].sql

実行例

20220829182819_test001.sql

という形式でマイグレーションファイルが作成される。

次回からは diff コマンドを使用して設計データの差分を取っていく。

supabase db diff -f file01

を実行すると

実行例

20220829183122_file01.sql

というマイグレーションファイルが作成される。

リモートのマイグレーションを戻すコマンドとしてはsupabase migration repairを使って可能です。

URL /user/{userId}

import { useParams } from "next/navigation";

export const Page = () => {
  const params = useParams();
  const userId = params.userId
...

import { useSearchParams } from "next/navigation";

export const Page = () => {
  const searchParams = useSearchParams();
  const userId = searchParams.get("userId");
...

URL /user/{userId}?status=active

export default function Page({
  params,
  searchParams,
}: {
  params: { userId: string };
  searchParams: { [key: string]: string | string[] | undefined };
}) {
  const status = searchParams.status;
...

• ハイドレーションするためClientComponentを作成する
Copy

"use client";

import { Button } from "@/components/ui/button";
import { FC } from "react";

export const ClientButton: FC = () => {
  const handleClick = async () => {
    console.log("Clickされました");
  };
  return (
    <Button onClick={handleClick}>
			Click
    </Button>
  );
};

• 上記のComponentをSSRのComponent内でインポートして利用する
Copy

import { FC } from "react";
import { ClientButton } from "./ClientButton";

export const Page: FC = () => {
  return (
    <ClientButton />
  );
};

以下のようなエラーが表示される

Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.

クライアントコンポーネント内でasync/awaitを使用することはできません。

URL /user/{userId}?status=active

  import { useSearchParams } from "next/navigation";
  
  export default function PageContent() {
    const searchParams = useSearchParams();
	  console.log("searchParams: ", searchParams);
  }