Initial commit from Create Next App

.env.example

@@ -0,0 +1,6 @@
+POSTGRES_URL=
+POSTGRES_URL_NON_POOLING=
+POSTGRES_USER=
+POSTGRES_HOST=
+POSTGRES_PASSWORD=
+POSTGRES_DATABASE=

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+next-env.d.ts
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+.env*.local
+
+# vercel
+.vercel
+
+# Turborepo
+.turbo
+
+# typescript
+*.tsbuildinfo

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/.pnpm/typescript@5.0.4/node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

README.md

@@ -0,0 +1,57 @@
+---
+name: Vercel Postgres Next.js Starter
+slug: postgres-starter
+description: Simple Next.js template that uses Vercel Postgres as the database.
+framework: Next.js
+useCase: Starter
+css: Tailwind
+database: Vercel Postgres
+deployUrl: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fstorage%2Fpostgres-starter&project-name=postgres-starter&repository-name=postgres-starter&demo-title=Vercel%20Postgres%20Next.js%20Starter&demo-description=Simple%20Next.js%20template%20that%20uses%20Vercel%20Postgres%20as%20the%20database.&demo-url=https%3A%2F%2Fpostgres-starter.vercel.app%2F&demo-image=https%3A%2F%2Fpostgres-starter.vercel.app%2Fopengraph-image.png&stores=%5B%7B"type"%3A"postgres"%7D%5D
+demoUrl: https://postgres-starter.vercel.app/
+relatedTemplates:
+  - postgres-prisma
+  - postgres-kysely
+  - postgres-sveltekit
+---
+
+# Vercel Postgres Next.js Starter
+
+Simple Next.js template that uses [Vercel Postgres](https://vercel.com/postgres) as the database.
+
+## Demo
+
+https://postgres-starter.vercel.app/
+
+## How to Use
+
+You can choose from one of the following two methods to use this repository:
+
+### One-Click Deploy
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=vercel-examples):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fstorage%2Fpostgres-starter&project-name=postgres-starter&repository-name=postgres-starter&demo-title=Vercel%20Postgres%20Next.js%20Starter&demo-description=Simple%20Next.js%20template%20that%20uses%20Vercel%20Postgres%20as%20the%20database.&demo-url=https%3A%2F%2Fpostgres-starter.vercel.app%2F&demo-image=https%3A%2F%2Fpostgres-starter.vercel.app%2Fopengraph-image.png&stores=%5B%7B"type"%3A"postgres"%7D%5D)
+
+### Clone and Deploy
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [pnpm](https://pnpm.io/installation) to bootstrap the example:
+
+```bash
+pnpm create next-app --example https://github.com/vercel/examples/tree/main/storage/postgres-starter
+```
+
+Once that's done, copy the .env.example file in this directory to .env.local (which will be ignored by Git):
+
+```bash
+cp .env.example .env.local
+```
+
+Then open `.env.local` and set the environment variables to match the ones in your Vercel Storage Dashboard.
+
+Next, run Next.js in development mode:
+
+```bash
+pnpm dev
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=vercel-examples) ([Documentation](https://nextjs.org/docs/deployment)).

app/globals.css

@@ -0,0 +1,19 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}

app/layout.tsx

@@ -0,0 +1,27 @@
+import './globals.css'
+import { Inter } from 'next/font/google'
+
+export const metadata = {
+  metadataBase: new URL('https://postgres-starter.vercel.app'),
+  title: 'Vercel Postgres Demo',
+  description:
+    'A simple Next.js app with Vercel Postgres as the database',
+}
+
+const inter = Inter({
+  variable: '--font-inter',
+  subsets: ['latin'],
+  display: 'swap',
+})
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.variable}>{children}</body>
+    </html>
+  )
+}

app/page.tsx

@@ -0,0 +1,92 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import { Suspense } from 'react'
+import Table from '@/components/table'
+import TablePlaceholder from '@/components/table-placeholder'
+import ExpandingArrow from '@/components/expanding-arrow'
+
+export const runtime = 'edge'
+export const preferredRegion = 'home'
+export const dynamic = 'force-dynamic'
+
+export default function Home() {
+  return (
+    <main className="relative flex min-h-screen flex-col items-center justify-center">
+      <Link
+        href="https://vercel.com/templates/next.js/postgres-starter"
+        className="group mt-20 sm:mt-0 rounded-full flex space-x-1 bg-white/30 shadow-sm ring-1 ring-gray-900/5 text-gray-600 text-sm font-medium px-10 py-2 hover:shadow-lg active:shadow-sm transition-all"
+      >
+        <p>Deploy your own to Vercel</p>
+        <ExpandingArrow />
+      </Link>
+      <h1 className="pt-4 pb-8 bg-gradient-to-br from-black via-[#171717] to-[#575757] bg-clip-text text-center text-4xl font-medium tracking-tight text-transparent md:text-7xl">
+        Postgres on Vercel
+      </h1>
+      <Suspense fallback={<TablePlaceholder />}>
+        <Table />
+      </Suspense>
+      <p className="font-light text-gray-600 w-full max-w-lg text-center mt-6">
+        <Link
+          href="https://vercel.com/postgres"
+          className="font-medium underline underline-offset-4 hover:text-black transition-colors"
+        >
+          Vercel Postgres
+        </Link>{' '}
+        demo. <br /> Built with{' '}
+        <Link
+          href="https://nextjs.org/docs"
+          className="font-medium underline underline-offset-4 hover:text-black transition-colors"
+        >
+          Next.js App Router
+        </Link>
+        .
+      </p>
+
+      <div className="flex justify-center space-x-5 pt-10 mt-10 border-t border-gray-300 w-full max-w-xl text-gray-600">
+        <Link
+          href="https://postgres-prisma.vercel.app/"
+          className="font-medium underline underline-offset-4 hover:text-black transition-colors"
+        >
+          Prisma
+        </Link>
+        <Link
+          href="https://postgres-kysely.vercel.app/"
+          className="font-medium underline underline-offset-4 hover:text-black transition-colors"
+        >
+          Kysely
+        </Link>
+        <Link
+          href="https://postgres-drizzle.vercel.app/"
+          className="font-medium underline underline-offset-4 hover:text-black transition-colors"
+        >
+          Drizzle
+        </Link>
+      </div>
+
+      <div className="sm:absolute sm:bottom-0 w-full px-20 py-10 flex justify-between">
+        <Link href="https://vercel.com">
+          <Image
+            src="/vercel.svg"
+            alt="Vercel Logo"
+            width={100}
+            height={24}
+            priority
+          />
+        </Link>
+        <Link
+          href="https://github.com/vercel/examples/tree/main/storage/postgres-starter"
+          className="flex items-center space-x-2"
+        >
+          <Image
+            src="/github.svg"
+            alt="GitHub Logo"
+            width={24}
+            height={24}
+            priority
+          />
+          <p className="font-light">Source</p>
+        </Link>
+      </div>
+    </main>
+  )
+}

components/expanding-arrow.tsx

@@ -0,0 +1,36 @@
+export default function ExpandingArrow({ className }: { className?: string }) {
+  return (
+    <div className="group relative flex items-center">
+      <svg
+        className={`${
+          className ? className : 'h-4 w-4'
+        } absolute transition-all group-hover:translate-x-1 group-hover:opacity-0`}
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+      >
+        <path
+          fillRule="evenodd"
+          d="M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z"
+        ></path>
+      </svg>
+      <svg
+        className={`${
+          className ? className : 'h-4 w-4'
+        } absolute opacity-0 transition-all group-hover:translate-x-1 group-hover:opacity-100`}
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+      >
+        <path
+          fillRule="evenodd"
+          d="M8.22 2.97a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06l2.97-2.97H3.75a.75.75 0 010-1.5h7.44L8.22 4.03a.75.75 0 010-1.06z"
+        ></path>
+      </svg>
+    </div>
+  )
+}

components/refresh-button.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { useTransition } from 'react'
+
+export default function RefreshButton() {
+  const router = useRouter()
+  const [isPending, startTransition] = useTransition()
+
+  return (
+    <button
+      className={`${
+        isPending ? 'cursor-not-allowed text-gray-400' : ''
+      } text-sm text-gray-500 hover:text-gray-900`}
+      disabled={isPending}
+      onClick={() => {
+        startTransition(() => {
+          router.refresh()
+        })
+      }}
+    >
+      {isPending ? 'Refreshing...' : 'Refresh'}
+    </button>
+  )
+}

components/table-placeholder.tsx

@@ -0,0 +1,29 @@
+import RefreshButton from './refresh-button'
+
+export default function TablePlaceholder() {
+  return (
+    <div className="bg-white/30 p-12 shadow-xl ring-1 ring-gray-900/5 rounded-lg backdrop-blur-lg max-w-xl mx-auto w-full">
+      <div className="flex justify-between items-center mb-4">
+        <div className="space-y-1">
+          <h2 className="text-xl font-semibold">Recent Users</h2>
+          <p className="text-sm text-gray-500">Fetching users...</p>
+        </div>
+        <RefreshButton />
+      </div>
+      <div className="divide-y divide-gray-900/5">
+        {[...Array(3)].map((_, i) => (
+          <div key={i} className="flex items-center justify-between py-3">
+            <div className="flex items-center space-x-4">
+              <div className="h-12 w-12 rounded-full bg-gray-200 animate-pulse" />
+              <div className="space-y-1">
+                <div className="h-6 w-28 rounded-md bg-gray-200 animate-pulse" />
+                <div className="h-4 w-24 rounded-md bg-gray-200 animate-pulse" />
+              </div>
+            </div>
+            <div className="h-4 w-12 rounded-md bg-gray-200 animate-pulse" />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

components/table.tsx

@@ -0,0 +1,66 @@
+import { sql } from '@vercel/postgres'
+import { timeAgo } from '@/lib/utils'
+import Image from 'next/image'
+import RefreshButton from './refresh-button'
+import { seed } from '@/lib/seed'
+
+export default async function Table() {
+  let data
+  let startTime = Date.now()
+
+  try {
+    data = await sql`SELECT * FROM users`
+  } catch (e: any) {
+    if (e.message.includes('relation "users" does not exist')) {
+      console.log(
+        'Table does not exist, creating and seeding it with dummy data now...'
+      )
+      // Table is not created yet
+      await seed()
+      startTime = Date.now()
+      data = await sql`SELECT * FROM users`
+    } else {
+      throw e
+    }
+  }
+
+  const { rows: users } = data
+  const duration = Date.now() - startTime
+
+  return (
+    <div className="bg-white/30 p-12 shadow-xl ring-1 ring-gray-900/5 rounded-lg backdrop-blur-lg max-w-xl mx-auto w-full">
+      <div className="flex justify-between items-center mb-4">
+        <div className="space-y-1">
+          <h2 className="text-xl font-semibold">Recent Users</h2>
+          <p className="text-sm text-gray-500">
+            Fetched {users.length} users in {duration}ms
+          </p>
+        </div>
+        <RefreshButton />
+      </div>
+      <div className="divide-y divide-gray-900/5">
+        {users.map((user) => (
+          <div
+            key={user.name}
+            className="flex items-center justify-between py-3"
+          >
+            <div className="flex items-center space-x-4">
+              <Image
+                src={user.image}
+                alt={user.name}
+                width={48}
+                height={48}
+                className="rounded-full ring-1 ring-gray-900/5"
+              />
+              <div className="space-y-1">
+                <p className="font-medium leading-none">{user.name}</p>
+                <p className="text-sm text-gray-500">{user.email}</p>
+              </div>
+            </div>
+            <p className="text-sm text-gray-500">{timeAgo(user.createdAt)}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

lib/seed.ts

@@ -0,0 +1,39 @@
+import { sql } from '@vercel/postgres'
+
+export async function seed() {
+  const createTable = await sql`
+    CREATE TABLE IF NOT EXISTS users (
+      id SERIAL PRIMARY KEY,
+      name VARCHAR(255) NOT NULL,
+      email VARCHAR(255) UNIQUE NOT NULL,
+      image VARCHAR(255),
+      "createdAt" TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+    );
+    `
+
+  console.log(`Created "users" table`)
+
+  const users = await Promise.all([
+    sql`
+          INSERT INTO users (name, email, image)
+          VALUES ('Guillermo Rauch', 'rauchg@vercel.com', 'https://images.ctfassets.net/e5382hct74si/2P1iOve0LZJRZWUzfXpi9r/9d4d27765764fb1ad7379d7cbe5f1043/ucxb4lHy_400x400.jpg')
+          ON CONFLICT (email) DO NOTHING;
+      `,
+    sql`
+          INSERT INTO users (name, email, image)
+          VALUES ('Lee Robinson', 'lee@vercel.com', 'https://images.ctfassets.net/e5382hct74si/4BtM41PDNrx4z1ml643tdc/7aa88bdde8b5b7809174ea5b764c80fa/adWRdqQ6_400x400.jpg')
+          ON CONFLICT (email) DO NOTHING;
+      `,
+    sql`
+          INSERT INTO users (name, email, image)
+          VALUES ('Steven Tey', 'stey@vercel.com', 'https://images.ctfassets.net/e5382hct74si/4QEuVLNyZUg5X6X4cW4pVH/eb7cd219e21b29ae976277871cd5ca4b/profile.jpg')
+          ON CONFLICT (email) DO NOTHING;
+      `,
+  ])
+  console.log(`Seeded ${users.length} users`)
+
+  return {
+    createTable,
+    users,
+  }
+}

lib/utils.ts

@@ -0,0 +1,8 @@
+import ms from 'ms'
+
+export const timeAgo = (timestamp: Date, timeOnly?: boolean): string => {
+  if (!timestamp) return 'never'
+  return `${ms(Date.now() - new Date(timestamp).getTime())}${
+    timeOnly ? '' : ' ago'
+  }`
+}

next.config.js

@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    domains: ["images.ctfassets.net"],
+  },
+};
+
+module.exports = nextConfig;

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "postgres-starter",
+  "repository": "https://github.com/vercel/examples.git",
+  "license": "MIT",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@types/ms": "^0.7.32",
+    "@types/node": "20.8.3",
+    "@types/react": "18.2.25",
+    "@types/react-dom": "18.2.11",
+    "@vercel/postgres": "0.5.0",
+    "autoprefixer": "10.4.16",
+    "eslint": "8.51.0",
+    "eslint-config-next": "13.5.4",
+    "ms": "^2.1.3",
+    "next": "13.5.4",
+    "postcss": "8.4.31",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tailwindcss": "3.3.3",
+    "typescript": "5.2.2"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

public/github.svg

@@ -0,0 +1 @@
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>

public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

tailwind.config.js

@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+    './app/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        default: ['var(--font-inter)'],
+      },
+    },
+  },
+  plugins: [],
+}

tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "lib/seed.ts"
+  ],
+  "exclude": ["node_modules"]
+}