この記事の目的
- Next.jsでDBを使用してサイト構築する際の備忘録
- SupabaseでPostgreSQLのDB作成する際のフロー確認用
- Next.jsにDBを追加した際にVercelでデプロイするフロー
記事の概要
今回はNext.jsにBaaS（Backend as a Service）であるSupabaseでPostgreSQLをDBとして用意し、超簡易的なブログ投稿サイトを公開するところまでを行っていきたいと思います。
要はNext.jsにバックエンドも追加してフルスタックのサイトを公開しようってことになります！
また、目的としてはNext.jsにDB（バックエンド部分）追加をして公開できるようにすることなので、スタイルや機能面は無視しています
また、本記事では自分用にまとめているので、細かい内容については下記の記事を参考にしてみて下さい！
- Next.js、Prisma、および PostgreSQL を使用してフルスタック アプリを構築する方法
-
Next.js､ Prisma､PostgreSQLでフルスタックアプリを作る
後者の記事は前者の記事を日本語に翻訳してくれているみたいです。
使用技術と前提
使用技術
- Next.js(バージョンは12)
- react
- typescript
- prisma
- Supabase
前提
- GitHubアカウント (OAuthアプリを作成するために使用)
- Googleアカウント (OAuthアプリを作成するために使用)
- Vercelアカウント (作成したアプリをデプロイするために使用)
- Supabaseアカウント (PostgreSQLをDBとして用意するために使用)
プロジェクト公開までのフロー
- ①Next.jsのプロジェクト作成
- ②prismaインストール
- ③supabaseの設定
- ④DB設定（schema.prismaでテーブル作成）
- ⑤投稿データ取得等の処理実装（Prisma Client）
- ⑥NextAuth.js ライブラリをインストール
- ⑦ログイン機能追加
- ⑧GitHub認証設定
- ⑨Google認証設定
- ⑩Vercelで公開してみる
※長くなるためこの記事では①〜⑤までをまとめています。⑥以降はこちらの記事でまとめています
※バックエンドを実装してVercel公開できることを目的としているので、コードは載せていますが細かい説明せずにさらっと説明しているので、ソースコード全体についてはこちらのGitHubを参考にして下さい。
①Next.jsのプロジェクト作成
Next.jsのプロジェクトを作成（下記のコマンドでクローンして下さい）
npx create-next-app --example https://github.com/prisma/blogr-nextjs-prisma/tree/main blogr-nextjs-prisma
作成したプロジェクトに移動しサーバー起動
cd blogr-nextjs-prisma
npm run dev
npm run devの後https://localhost:3000で下画像のように表示されるかと思います
prismaインストール
prismaインストール
npm install prisma --save-dev
prisma初期化
npx prisma init
初期化すると以下のファイルが生成される
env-
prisma/schema.prisma
.envにはDBの接続先設定。schema.prismaに使用するデータベースとテーブル設定。
.envは③で設定の説明をしています
schema.prismaは④で設定の説明をしています
③supabaseの設定
supabaseでプロジェクト作成
こちらについては下記の「手順３」まで行って下さい
Prisma で使用する無料の PostgreSQL データベースを Supabase にセットアップする
もしくは下記の記事の「プロジェクト名等の入力・選択」まで行って下さい
SupabaseでPostgreSQLのDB作成
PostgreSQLデータベースの接続URLの設定
プロジェクト作成後「Project Setting」->「Database」->「Connection string」->「URI」を選択しコピー
.envにDBの接続先設定
例としてパスワードがpassword1234の場合のDATABASE_URLを記載しています
※パスワードはプロジェクト作成時に記入したものになります。
.env
DATABASE_URL="postgresql://postgres:password1234@db.vnsuouoysyhgsevojusk.supabase.co:5432/postgres"
④DB設定（schema.prismaでテーブル作成）
必要なテーブル定義をschema.prismaに下記のように記載していきます。
AccountやUserのカラムについては認証で必要になるためこのようになっています
prisma/schema.prisma
// schema.prisma
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
generator client {
provider = "prisma-client-js"
}
model Post {
id String @id @default(cuid())
title String
content String?
published Boolean @default(false)
author User? @relation(fields: [authorId], references: [id])
authorId String?
}
model Account {
id String @id @default(cuid())
userId String @map("user_id")
type String
provider String
providerAccountId String @map("provider_account_id")
refresh_token String?
access_token String?
expires_at Int?
token_type String?
scope String?
id_token String?
session_state String?
oauth_token_secret String?
oauth_token String?
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
@@unique([provider, providerAccountId])
@@map("accounts")
}
model Session {
id String @id @default(cuid())
sessionToken String @unique @map("session_token")
userId String @map("user_id")
expires DateTime
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
@@map("sessions")
}
model User {
id String @id @default(cuid())
name String?
email String? @unique
emailVerified DateTime? @map("email_verified")
image String?
createdAt DateTime @default(now()) @map(name: "created_at")
updatedAt DateTime @updatedAt @map(name: "updated_at")
posts Post[]
accounts Account[]
sessions Session[]
@@map(name: "users")
}
model VerificationToken {
identifier String
token String @unique
expires DateTime
@@unique([identifier, token])
@@map("verificationtokens")
}
DBスキーマの同期
下記コマンドでDBスキーマの同期を行います。（テーブル作成）
npx prisma db push
成功すると下記のようなメッセージがでるかと思います
Environment variables loaded from /Users/nikolasburk/Desktop/nextjs-guide/blogr-starter/.env
Prisma schema loaded from prisma/schema.prisma
🚀 Your database is now in sync with your schema. Done in 2.10s
これでSupabaseの画面でも下のようにテーブルが作成されているのが確認できるかと思います
【補足】Prisma Studioでも確認してみる
Supabaseがあるので今回は必要はあまりないですがPrisma Studioでもテーブルの確認やデータの管理ができるのでこちらも記載しています
Prisma studioというデータベースを操作するためのGUIが起動。
npx prisma studio
上記実行すると下記のようにメッセージが表示されるかと思いますのでhttp://localhost:5555を開いてみましょう
Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Prisma Studio is up on http://localhost:5555
http://localhost:5555を開くと下の画像のようにテーブルが追加されているかと思います。
自分はデータを追加しているのでデータが入っていますが、実際はまだ入っていないかと思います
⑤投稿データ取得等の処理実装（Prisma Client）
まず基本的なデータ取得をPrisma Clientを使用して実装していきます
Prisma Client をインストール
npm install @prisma/client
Prisma Client を生成
npx prisma generate
Prismaクライアントへの接続部分を作成
lib/prisma.tsを作成しPrismaクライアントへの接続部分を実装する
lib/prisma.tsコードをクリックして全て表示
lib/prisma.ts
// PrismaClientをインポート
import { PrismaClient } from '@prisma/client';
// PrismaClientインスタンスを初期化
let prisma: PrismaClient;
// NODE_ENVが'production'かを確認
if (process.env.NODE_ENV === 'production') {
// プロダクション環境の場合、新しいPrismaClientインスタンス作成
prisma = new PrismaClient();
} else {
// 開発環境の場合、グローバルなPrismaClientインスタンスが存在するかを確認
if (!global.prisma) {
global.prisma = new PrismaClient();
}
prisma = global.prisma;
}
export default prisma;
公開されたすべての投稿を取得する処理の実装
pages/index.tsxを作成し投稿を取得する処理の実装をする
libディレクトリを作成し、配下にprisma.tsを作成して下さい
pages/index.tsxコードをクリックして全て表示
pages/index.tsx
import React from "react"
import { GetStaticProps } from "next"
import Layout from "../components/Layout"
import Post, { PostProps } from "../components/Post"
// PrismaClientのインスタンスをインポートします。
import prisma from '../lib/prisma';
// GetStaticProps関数を実装して、ページの初期データを取得
export const getStaticProps: GetStaticProps = async () => {
// PrismaClientインスタンスを使用して、公開された記事をすべて取得
const feed = await prisma.post.findMany({
where: { published: true },
include: {
author: {
select: { name: true },
},
},
});
// ページの初期データを返します。
return {
props: { feed },
revalidate: 10,
};
};
// 型定義
type Props = {
feed: PostProps[]
}
const Blog: React.FC<Props> = (props) => {
return (
<Layout>
<div className="page">
<h1>Public Feed</h1>
<main>
{props.feed.map((post) => (
<div key={post.id} className="post">
<Post post={post} />
</div>
))}
</main>
</div>
<style jsx>{`
.post {
background: white;
transition: box-shadow 0.1s ease-in;
}
.post:hover {
box-shadow: 1px 1px 3px #aaa;
}
.post + .post {
margin-top: 2rem;
}
`}</style>
</Layout>
)
}
export default Blog
その他のブログ機能作成（新規投稿/下書き/公開/指定IDの投稿取得/削除）
新規投稿
pages/create.tsxを作成
pages/api/post/index.tsを作成
pages/create.tsxコードをクリックして全て表示
pages/create.tsx
import React, { useState } from 'react';
import Layout from '../components/Layout';
import Router from 'next/router';
const Draft: React.FC = () => {
// タイトルとコンテンツの状態管理
const [title, setTitle] = useState('');
const [content, setContent] = useState('');
// フォームデータ送信関数を定義
const submitData = async (e: React.SyntheticEvent) => {
e.preventDefault();
try {
// 送信データを作成
const body = { title, content };
// APIエンドポイントにPOSTリクエストを送信
await fetch('/api/post', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
});
// データ送信後、下書き一覧ページにリダイレクト
await Router.push('/drafts');
} catch (error) {
console.error(error);
}
};
return (
<Layout>
<div>
<form onSubmit={submitData}>
<h1>New Draft</h1>
<input
autoFocus
onChange={(e) => setTitle(e.target.value)}
placeholder="Title"
type="text"
value={title}
/>
<textarea
cols={50}
onChange={(e) => setContent(e.target.value)}
placeholder="Content"
rows={8}
value={content}
/>
<input disabled={!content || !title} type="submit" value="Create" />
<a className="back" href="#" onClick={() => Router.push('/')}>
or Cancel
</a>
</form>
</div>
<style jsx>{`
.page {
background: var(--geist-background);
padding: 3rem;
display: flex;
justify-content: center;
align-items: center;
}
input[type='text'],
textarea {
width: 100%;
padding: 0.5rem;
margin: 0.5rem 0;
border-radius: 0.25rem;
border: 0.125rem solid rgba(0, 0, 0, 0.2);
}
input[type='submit'] {
background: #ececec;
border: 0;
padding: 1rem 2rem;
}
.back {
margin-left: 1rem;
}
`}</style>
</Layout>
);
};
export default Draft;
pages/api/post/index.tsコードをクリックして全て表示
pages/api/post/index.ts
import { getSession } from 'next-auth/react';
import prisma from '../../../lib/prisma';
export default async function handle(req, res) {
// タイトルとコンテンツを抽出
const { title, content } = req.body;
// セッション取得。
const session = await getSession({ req });
// PrismaClientを使用して、新しい記事を作成。
const result = await prisma.post.create({
data: {
title: title,
content: content,
author: { connect: { email: session?.user?.email } },
},
});
// レスポンスとして、作成された記事をJSON形式で返す
res.json(result);
}
下書き機能
pages/drafts.tsxを作成
pages/drafts.tsxコードをクリックして全て表示
pages/drafts.tsx
import React from 'react';
import { GetServerSideProps } from 'next';
import { useSession, getSession } from 'next-auth/react';
import Layout from '../components/Layout';
import Post, { PostProps } from '../components/Post';
import prisma from '../lib/prisma';
// 下書きの一覧を取得
export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
// クライアントのセッション取得
const session = await getSession({ req });
// セッションが存在しない場合、403ステータスコードと空の下書きリストを返す
if (!session) {
res.statusCode = 403;
return { props: { drafts: [] } };
}
// セッションが存在する場合、下書き記事リスト取得
const drafts = await prisma.post.findMany({
where: {
author: { email: session.user.email },
published: false,
},
include: {
author: {
select: { name: true },
},
},
});
// 下書き記事のリストをpropsとして返す
return {
props: { drafts },
};
};
type Props = {
drafts: PostProps[];
};
const Drafts: React.FC<Props> = (props) => {
const { data: session } = useSession();
if (!session) {
return (
<Layout>
<h1>My Drafts</h1>
<div>You need to be authenticated to view this page.</div>
</Layout>
);
}
return (
<Layout>
<div className="page">
<h1>My Drafts</h1>
<main>
{props.drafts.map((post) => (
<div key={post.id} className="post">
<Post post={post} />
</div>
))}
</main>
</div>
<style jsx>{`
.post {
background: var(--geist-background);
transition: box-shadow 0.1s ease-in;
}
.post:hover {
box-shadow: 1px 1px 3px #aaa;
}
.post + .post {
margin-top: 2rem;
}
`}</style>
</Layout>
);
};
export default Drafts;
公開機能
pages/api/publish/[id].tsを作成
pages/p/[id].tsxを作成
pages/api/publish/[id].tsコードをクリックして全て表示
pages/api/publish/[id].ts
import prisma from '../../../lib/prisma';
export default async function handle(req, res) {
// 公開する記事のIDを取得
const postId = req.query.id;
// 記事を更新、publishedフラグをtrueに設定
const post = await prisma.post.update({
where: { id: postId },
data: { published: true },
});
// 更新された記事をJSON形式で返す
res.json(post);
}
pages/p/[id].tsxコードをクリックして全て表示
pages/p/[id].tsx
import React from 'react';
import { GetServerSideProps } from 'next';
import ReactMarkdown from 'react-markdown';
import Router from 'next/router';
import Layout from '../../components/Layout';
import { PostProps } from '../../components/Post';
import { useSession } from 'next-auth/react';
import prisma from '../../lib/prisma';
export const getServerSideProps: GetServerSideProps = async ({ params }) => {
const post = await prisma.post.findUnique({
where: {
id: String(params?.id),
},
include: {
author: {
select: { name: true, email: true },
},
},
});
return {
props: post,
};
};
async function publishPost(id: string): Promise<void> {
await fetch(`/api/publish/${id}`, {
method: 'PUT',
});
await Router.push('/');
}
async function deletePost(id: string): Promise<void> {
await fetch(`/api/post/${id}`, {
method: 'DELETE',
});
Router.push('/');
}
const Post: React.FC<PostProps> = (props) => {
const { data: session, status } = useSession();
if (status === 'loading') {
return <div>Authenticating ...</div>;
}
const userHasValidSession = Boolean(session);
const postBelongsToUser = session?.user?.email === props.author?.email;
let title = props.title;
if (!props.published) {
title = `${title} (Draft)`;
}
return (
<Layout>
<div>
<h2>{title}</h2>
<p>By {props?.author?.name || 'Unknown author'}</p>
<ReactMarkdown children={props.content} />
{!props.published && userHasValidSession && postBelongsToUser && (
<button onClick={() => publishPost(props.id)}>Publish</button>
)}
{userHasValidSession && postBelongsToUser && (
<button onClick={() => deletePost(props.id)}>Delete</button>
)}
</div>
<style jsx>{`
.page {
background: var(--geist-background);
padding: 2rem;
}
.actions {
margin-top: 2rem;
}
button {
background: #ececec;
border: 0;
border-radius: 0.125rem;
padding: 1rem 2rem;
}
button + button {
margin-left: 1rem;
}
`}</style>
</Layout>
);
};
export default Post;
指定IDの投稿取得/削除機能
pages/api/post/[id].tsを作成
pages/api/post/[id].tsコードをクリックして全て表示
pages/api/post/[id].ts
import prisma from '../../../lib/prisma';
export default async function handle(req, res) {
// 記事のIDを取得
const postId = req.query.id;
// HTTPメソッドがDELETEの場合、記事を削除
if (req.method === 'DELETE') {
const post = await prisma.post.delete({
where: { id: postId },
});
// 削除された記事をJSON形式で返す
res.json(post);
} else {
// HTTPメソッドがDELETE以外の場合は、エラーメッセージを返す
throw new Error(
`The HTTP ${req.method} method is not supported at this route.`,
);
}
}
Next.jsにDB追加してVercelで公開してみた①終了
お疲れ様です。一旦「⑤投稿データ取得等の処理実装（Prisma Client）」までは完了しましたので、
基本的なブログ投稿機能はこれでできたかと思います。
パート②では認証機能を追加しVercelで公開するとこまでをまとめていきたいと思います
パート②のNext.jsにDB追加してVercelで公開してみた②記事はこちらから