はじめに

世の中には決着をつけなければいけない課題がたくさんあります。

きのこかたけのこか
WindowかMACか
AndroidかiPhoneか

とか
そんな論争の主戦場となる場所を作りました。

できること

アンケートの作成
アンケート投票
投票したアンケートにコメント

※どれもログインが必要です

使った技術

構成

ホスティング：Vercel
DB：PlanetScale
ドメイン：Cloudflare

フレームワークとか

NextJS(AppRouter)
NextAuth
prisma
react-hook-form
mui

今回初めて使ったものたち

話題になっている技術をなるべく採用しつつ開発をしたので、いくつか紹介します。

PlanetScale

サーバレスDBサービス。
めっちゃ良い。
5Gも使っていいんでしょうか？使いきれません。容量で選ぶなら一択です。
readを節約するための調整とかはしていないので、今後様子見て調整します。

prisma

みんな使ってるORM。
RDBを使うのがほぼ初めてだったので、SQLの学習とどっちがいいのかはよくわかっていません。prisma.schemaを更新した際に、prisma generateとかを実行する必要がありますが、デバッグ実行中だとうまく動かないので、停止してからprisma generateしないといけないことを知らず、ここでだいぶ時間とられてしまいました。
取得したデータに型がついてくれるのはめっちゃ良い！

react-hook-form

フォームの入力とかバリデーションとかが簡単にできるやつ。
めっちゃ良い。
最初はぱっと見わかりにくそうでしたが、使ってみると簡単。
とりあえずControllerのrenderの中にぶち込んで、fieldを{...field}みたいな形で渡せばいい感じに動く。

<Controller
  name="commentText"
  control={control}
  rules={validationRules.commentText}
  render={({ field, fieldState }) => (
    <TextField
      {...field}
      placeholder="コメント"
      fullWidth
      multiline
      error={fieldState.invalid}
      helperText={fieldState.error?.message}
    />
  )}
/>

validationも以下のように定義しておいて、Controller側のrulesで読み込めば勝手にやってくれる。

const validationRules = {
  commentText: {
    required: "コメントを入力してください",
    minLength: { value: 1, message: "1文字以上入力してください" },
  },
};

フォームのsubmit時の実行ステータスもformState.isSubmittingで簡単に取れる！

const { control, handleSubmit, formState } = useForm<Inputs>();
...
  <LoadingButton
    type="submit"
    variant="contained"
    color="secondary"
    loading={formState.isSubmitting}
    disableElevation
    sx={{ fontWeight: "bold" }}
  >
    作成
  </LoadingButton>
 ...

NextJSの機能

Server Actions

AppRouterで原則SSRで実装し、データ取得処理もServer Actionsを利用しました。
投稿フォーム系のコンポーネントだけをクライアント側で動かしています。
api不要でできるので、すごく楽でした。

クライアント側

const onSubmit: SubmitHandler<Inputs> = async (data: Inputs) => {
    const result = await addComment(data); //これがサーバー側で実行される
    if ("error" in result) {
      //エラー処理
    } else {
      //正常に取得できた時の処理
    }
  };

"use server"と記載することで、サーバー側で実行してくれる

addComment.tsx

"use server";
import { prisma } from "@/db/db";

export async function addComment(props: {
  pollId: number;
  commentText: string;
}) {
  const { pollId, commentText } = props;
  try {
    const comment = await prisma.comment.create({
     ...
    });
    return comment;
  } catch (error) {
    return { error: error };
  }
}

Parallel Routes

投票してないなら投票画面、投票済みなら結果画面というように、そのユーザーの状態によって画面を出し分けています。

detail/[id]
├── @form
├── @guest
├── @result
├── @voted
└── layout.tsx

layout.tsxは以下のようにして出し分けています。

layout.tsx

export default async function Layout({
  form,
  voted,
  guest,
  result,
  params,
}: {
  form: React.ReactNode;
  voted: React.ReactNode;
  guest: React.ReactNode;
  result: React.ReactNode;
  params: { id: string };
}) {
  const id = Number(params.id);
  if (isNaN(id)) {
    notFound();
  }
  
  const session = await getServerSession(options);
  const poll = await getPoll(id);

  const isClosed = poll.closed || (poll.deadline && poll.deadline < new Date());

　//クローズ済みのアンケートだったらリザルト画面
  if (isClosed) {
    return <section>{result}</section>;
  }

  //ログインしてなければゲスト画面
  if (!session) {
    return <section>{guest}</section>;
  }

  //投票してれば投票済み画面、そうでなければ投票画面
  const IsVoted = poll.votes.some((vote) => vote.authorId === session.user.uid);
  return <section>{IsVoted ? voted : form}</section>;
}

NextAuth

めっちゃよい。
大まかな使い方は公式ページとかほかの記事でもわかり安く書いてあるので、記載しません。

細かいところでわかりにくいところがあったので、いくつか紹介します。

情報を追加する場合

roleの情報を追加する場合の例を示します。
まず、どこかにtypeを宣言します。

types/next-auth.d.tsx

import type { DefaultSession } from "next-auth";

declare module "next-auth" {
  interface Session {
    user: {
      role: string;
    } & DefaultSession["user"];
  }
}

declare module "next-auth/jwt" {
  interface JWT {
    role: string;
  }
}

初回ログイン時に、情報を格納する処理を追記します。

auth.config.tsx

import type { NextAuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const options: NextAuthOptions = {
  secret: process.env.NEXTAUTH_SECRET,
  session: { strategy: "jwt" },
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  callbacks: {
    jwt: async ({ token, account }) => {
      if (account) {
	// 初回ログイン時の処理を記載する
	// roleをtokenに追加する
	if (token.email == 'example.com') {
	  token.role = 'admin';
	} else {
	  token.role = 'user';
	}
      }
      return token;
    },
    session: async ({ session, token }) => {
      // sessionを利用する場合は、sessionにもroleを追加する
      session.user.role = token.role;
      return session;
    },
  },
};

これで、middlewareの処理や、sessionから情報が取れるようになります。

layout.tsxとか

export default async function Layout({
  children
}: {
  children: React.ReactNode;
}) {  
  const session = await getServerSession(options);
  const role = session.role;  
  
  return <section>{children}</section>
}

middlewareの処理

middlewareの処理を記載することで、認証が必要なページや認証時の処理を追加できます。
middlewareはsrc直下に記載します。
認証が必要なページの指定だけでよい場合は、以下のようにするだけです。

middleware.tsx

export { default } from "next-auth/middleware"

export const config = { 
  matcher: [
    "/user/:path*", //user配下のページすべて認証必須にしたい場合
    "/dashboard" //dashboardのみ認証必須になります。※dashboard配下は認証されません
  ]
}

認証時に、そのページにアクセスする権限があるのか等の確認処理をしたい場合は、以下のようにします。
config内のmatcherで指定したパスにアクセスがあった際にcallbacks.authorizedが実行されます。trueを返せばアクセス許可、falseの場合はsignInで指定したパスにリダイレクトされます。