Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1aedfea

Browse files
Merge pull request #22 from vercel/postgres
2 parents 708d6d5 + 1e0e727 commit 1aedfea

File tree

21 files changed

+2681
-2564
lines changed

21 files changed

+2681
-2564
lines changed

‎.env.example

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
1-
# Create a MySQL database with 2 clicks (no account needed): https://railway.app/
2-
DATABASE_URL="mysql://johndoe:randompassword@localhost:5432/mydb?schema=public"
1+
# Create a Postgres database on Vercel: https://vercel.com/postgres
2+
POSTGRES_URL=
3+
POSTGRES_PRISMA_URL=
4+
POSTGRES_URL_NON_POOLING=
5+
POSTGRES_USER=
6+
POSTGRES_HOST=
7+
POSTGRES_PASSWORD=
8+
POSTGRES_DATABASE=
39

410
# Generate one here: https://generate-secret.vercel.app/32 (only required for localhost)
511
NEXTAUTH_SECRET=

‎README.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
11
<p align="center">
2-
<a href="https://nextjs-mysql-auth.vercel.app/">
2+
<a href="https://nextjs-postgres-auth.vercel.app/">
33
<img src="/public/logo.png" height="96">
4-
<h3 align="center">Next.js Prisma MySQL Auth Starter</h3>
4+
<h3 align="center">Next.js Prisma PostgreSQL Auth Starter</h3>
55
</a>
66
</p>
77

88
<p align="center">
99
This is a <a href="https://nextjs.org/">Next.js</a> starter kit that uses <a href="https://next-auth.js.org/">Next-Auth</a> for simple email + password login<br/>
10-
<a href="https://www.prisma.io/">Prisma</a> as the ORM, and a MySQL database to persist the data.</p>
10+
<a href="https://www.prisma.io/">Prisma</a> as the ORM, and a PostgreSQL database to persist the data.</p>
1111

1212
<br/>
1313

1414
## Deploy Your Own
1515

1616
You can clone & deploy it to Vercel with one click:
1717

18-
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?demo-title=Next.js%20MySQL%20Auth%20Starter&demo-description=Simple%20Next.js%2013%20starter%20kit%20that%20uses%20Next-Auth%20for%20auth%20and%20MySQL%20as%20a%20database.&demo-url=https%3A%2F%2Fnextjs-mysql-auth.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F7rsVQ1ZBSiWe9JGO6FUeZZ%2F210cba91036ca912b2770e0bd5d6cc5d%2Fthumbnail.png&project-name=Next.js%20MySQL%20Auth%20Starter&repository-name=nextjs-mysql-auth-starter&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnextjs-mysql-auth-starter&from=templates&skippable-integrations=1&env=DATABASE_URL%2CNEXTAUTH_SECRET&envDescription=Generate%20a%20random%20secret%3A&envLink=https%3A%2F%2Fgithub.com%2Fvercel%2Fnextjs-mysql-auth-starter%2Fblob%2Fmain%2F.env.example)
18+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?demo-title=Next.js%20Prisma%20PostgreSQL%20Auth%20Starter&demo-description=Simple%20Next.js%2013%20starter%20kit%20that%20uses%20Next-Auth%20for%20auth%20and%20Prisma%20PostgreSQL%20as%20a%20database.&demo-url=https%3A%2F%2Fnextjs-postgres-auth.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F7rsVQ1ZBSiWe9JGO6FUeZZ%2F210cba91036ca912b2770e0bd5d6cc5d%2Fthumbnail.png&project-name=Next.js%%20Prisma%20PostgreSQL%20Auth%20Starter&repository-name=nextjs-postgres-auth-starter&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnextjs-postgres-auth-starter&from=templates&skippable-integrations=1&env=NEXTAUTH_SECRET&envDescription=Generate%20a%20random%20secret%3A&envLink=https://generate-secret.vercel.app/&stores=%5B%7B"type"%3A"postgres"%7D%5D)
1919

2020
## Developing Locally
2121

2222
You can clone & create this repo with the following command
2323

2424
```bash
25-
npx create-next-app nextjs-typescript-starter --example "https://github.com/vercel/nextjs-mysql-auth-starter"
25+
npx create-next-app nextjs-typescript-starter --example "https://github.com/vercel/nextjs-postgres-auth-starter"
2626
```
2727

2828
## Getting Started

‎pages/api/auth/[...nextauth].ts renamed to ‎app/api/auth/[...nextauth]/route.ts

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import NextAuth from "next-auth";
1+
import NextAuth,{NextAuthOptions} from "next-auth";
22
import CredentialsProvider from "next-auth/providers/credentials";
33
import prisma from "@/lib/prisma";
44
import { compare } from "bcrypt";
55

6-
export defaultNextAuth({
6+
export constauthOptions: NextAuthOptions={
77
providers: [
88
CredentialsProvider({
99
credentials: {},
@@ -30,4 +30,8 @@ export default NextAuth({
3030
}),
3131
],
3232
session: { strategy: "jwt" },
33-
});
33+
};
34+
35+
const handler = NextAuth(authOptions);
36+
37+
export { handler as GET, handler as POST };
Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,24 @@
11
import prisma from "@/lib/prisma";
22
import { NextApiRequest, NextApiResponse } from "next";
33
import { hash } from "bcrypt";
4+
import { NextResponse } from "next/server";
45

5-
export default async function handler(
6-
req: NextApiRequest,
7-
res: NextApiResponse
8-
) {
9-
const { email, password } = req.body;
6+
export async function POST(req: Request) {
7+
const { email, password } = await req.json();
108
const exists = await prisma.user.findUnique({
119
where: {
1210
email,
1311
},
1412
});
1513
if (exists) {
16-
res.status(400).send("User already exists");
14+
returnNextResponse.json({error: "User already exists"},{status: 400});
1715
} else {
1816
const user = await prisma.user.create({
1917
data: {
2018
email,
2119
password: await hash(password, 10),
2220
},
2321
});
24-
res.status(200).json(user);
22+
returnNextResponse.json(user);
2523
}
2624
}

‎app/head.tsx

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎app/layout.tsx

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,45 @@
11
// These styles apply to every route in the application
22
import "@/styles/globals.css";
3+
import { Metadata } from "next";
34
import { Inter } from "@next/font/google";
4-
import Toaster from "@/components/toaster";
5+
import {Toaster }from "react-hot-toast";
56
import AuthStatus from "@/components/auth-status";
7+
import { Suspense } from "react";
68

79
const inter = Inter({
810
variable: "--font-inter",
11+
subsets: ["latin"],
912
});
1013

14+
const title = "Next.js Prisma Postgres Auth Starter";
15+
const description =
16+
"This is a Next.js starter kit that uses Next-Auth for simple email + password login and a Postgres database to persist the data.";
17+
18+
export const metadata: Metadata = {
19+
title,
20+
description,
21+
twitter: {
22+
card: "summary_large_image",
23+
title,
24+
description,
25+
},
26+
metadataBase: new URL("https://nextjs-postgres-auth.vercel.app"),
27+
themeColor: "#FFF",
28+
};
29+
1130
export default async function RootLayout({
1231
children,
1332
}: {
1433
children: React.ReactNode;
1534
}) {
16-
const AuthStatusDiv = await AuthStatus();
1735
return (
1836
<html lang="en">
1937
<body className={inter.variable}>
2038
<Toaster />
21-
{AuthStatusDiv}
39+
<Suspense fallback="Loading...">
40+
{/* @ts-expect-error Async Server Component */}
41+
<AuthStatus />
42+
</Suspense>
2243
{children}
2344
</body>
2445
</html>

‎app/login/page.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
import Image from "next/image";
22
import Form from "@/components/form";
3+
import Link from "next/link";
34

45
export default function Login() {
56
return (
67
<div className="flex h-screen w-screen items-center justify-center bg-gray-50">
78
<div className="z-10 w-full max-w-md overflow-hidden rounded-2xl border border-gray-100 shadow-xl">
89
<div className="flex flex-col items-center justify-center space-y-3 border-b border-gray-200 bg-white px-4 py-6 pt-8 text-center sm:px-16">
9-
<a href="https://dub.sh">
10+
<Link href="/">
1011
<Image
1112
src="/logo.png"
1213
alt="Logo"
1314
className="h-10 w-10 rounded-full"
1415
width={20}
1516
height={20}
1617
/>
17-
</a>
18+
</Link>
1819
<h3 className="text-xl font-semibold">Sign In</h3>
1920
<p className="text-sm text-gray-500">
2021
Use your email and password to sign in

‎app/opengraph-image.png

324 KB
Loading[フレーム]

‎app/page.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default function Home() {
1414
/>
1515
<div className="text-center max-w-screen-sm mb-10">
1616
<h1 className="text-stone-200 font-bold text-2xl">
17-
Next.js Prisma MySQL Auth Starter
17+
Next.js Prisma PostgreSQL Auth Starter
1818
</h1>
1919
<p className="text-stone-400 mt-5">
2020
This is a{" "}
@@ -35,8 +35,8 @@ export default function Home() {
3535
>
3636
Next-Auth
3737
</a>{" "}
38-
for simple email + password login and a MySQL database to persist
39-
the data.
38+
for simple email + password login and a PostgreSQL database to
39+
persist the data.
4040
</p>
4141
</div>
4242
<div className="flex space-x-3">

‎app/protected/page.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ export default function Home() {
77
<iframe
88
src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1"
99
title="YouTube video player"
10-
frameBorder="0"
1110
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
1211
allowFullScreen
1312
className="w-full max-w-screen-lg aspect-video"

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /