├── .gitignore
├── LICENSE
├── README.md
├── app
├── actions.ts
├── favicon.ico
├── globals.css
├── layout.tsx
├── page.tsx
└── todo-list.tsx
├── drizzle.config.ts
├── lib
└── db
│ ├── drizzle.ts
│ ├── migrate.ts
│ ├── migrations
│ ├── 0000_bitter_talisman.sql
│ └── meta
│ │ ├── 0000_snapshot.json
│ │ └── _journal.json
│ ├── queries.ts
│ ├── schema.ts
│ ├── seed.ts
│ └── setup.ts
├── next.config.ts
├── package.json
├── pnpm-lock.yaml
├── postcss.config.mjs
└── tsconfig.json
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 | .yarn/install-state.gz
8 |
9 | # testing
10 | /coverage
11 |
12 | # next.js
13 | /.next/
14 | /out/
15 |
16 | # production
17 | /build
18 |
19 | # misc
20 | .DS_Store
21 | *.pem
22 |
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 |
28 | # env files
29 | .env*
30 |
31 | # vercel
32 | .vercel
33 |
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | .vscode
38 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2024 Vercel, Inc.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Next.js and Postgres Starter Template
2 |
3 | ## Tech Stack
4 |
5 | - **Framework**: [Next.js](https://nextjs.org/)
6 | - **Database**: [Postgres](https://www.postgresql.org/)
7 | - **ORM**: [Drizzle](https://orm.drizzle.team/)
8 |
9 | ## Getting Started
10 |
11 | ```bash
12 | git clone https://github.com/vercel/postgres-next-starter
13 | cd postgres-next-starter
14 | pnpm install
15 | ```
16 |
17 | ## Running Locally
18 |
19 | Use the included setup script to create your `.env` file:
20 |
21 | ```bash
22 | pnpm db:setup
23 | ```
24 |
25 | Then, run the database migrations and seed the database:
26 |
27 | ```bash
28 | pnpm db:generate
29 | pnpm db:migrate
30 | pnpm db:seed
31 | ```
32 |
33 | Finally, run the Next.js development server:
34 |
35 | ```bash
36 | pnpm dev
37 | ```
38 |
39 | Open [http://localhost:3000](http://localhost:3000) in your browser to see the app in action.
40 |
--------------------------------------------------------------------------------
/app/actions.ts:
--------------------------------------------------------------------------------
1 | 'use server';
2 |
3 | import { revalidatePath } from 'next/cache';
4 | import { eq } from 'drizzle-orm';
5 | import { db } from '@/lib/db/drizzle';
6 | import { todos } from '@/lib/db/schema';
7 |
8 | export async function addTodo(_: any, formData: FormData) {
9 | const text = formData.get('todo') as string;
10 |
11 | if (text.trim()) {
12 | await db.insert(todos).values({ text });
13 | revalidatePath('/');
14 | return { message: 'Todo added successfully', input: '' };
15 | }
16 |
17 | return { message: 'Todo cannot be empty', input: text };
18 | }
19 |
20 | export async function deleteTodo(_: any, formData: FormData) {
21 | const id = formData.get('id') as string;
22 |
23 | await db.delete(todos).where(eq(todos.id, id));
24 |
25 | revalidatePath('/');
26 | return { message: 'Todo deleted successfully' };
27 | }
28 |
--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vercel/postgres-next-starter/ed1c083b4477e096e7904473008eab1734a154df/app/favicon.ico
--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
1 | @import 'tailwindcss';
2 |
3 | @theme {
4 | --font-family-sans: 'Geist', sans-serif;
5 | }
6 |
--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from 'next';
2 | import { Geist_Mono } from 'next/font/google';
3 | import './globals.css';
4 |
5 | const geistMono = Geist_Mono({ subsets: ['latin'] });
6 |
7 | export const metadata: Metadata = {
8 | title: 'Todo List',
9 | description: 'A simple todo list application',
10 | };
11 |
12 | export default function RootLayout({
13 | children,
14 | }: {
15 | children: React.ReactNode;
16 | }) {
17 | return (
18 |
19 |
20 | {children}
21 |
22 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { getTodos } from '@/lib/db/queries';
2 | import TodoList from './todo-list';
3 |
4 | // This will be replaced by 'use cache' soon
5 | export const dynamic = 'force-static';
6 |
7 | export default async function Home() {
8 | const todos = await getTodos();
9 |
10 | return (
11 |
12 |
13 |
14 | Postgres Starter
15 |
16 |
17 |
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/app/todo-list.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useActionState } from 'react';
4 | import { addTodo, deleteTodo } from './actions';
5 | import { Loader2, Plus, Trash2 } from 'lucide-react';
6 | import { Todo } from '@/lib/db/queries';
7 |
8 | export default function TodoList({ initialTodos }: { initialTodos: Todo[] }) {
9 | const [addState, addAction, isAddPending] = useActionState(addTodo, {
10 | input: '',
11 | message: '',
12 | });
13 | const [_, deleteAction] = useActionState(deleteTodo, {
14 | message: '',
15 | });
16 |
17 | return (
18 |
19 |
39 | {addState.message && (
40 |
{addState.message}
41 | )}
42 |
43 | {initialTodos.map((todo) => (
44 | -
48 | {todo.text}
49 |
58 |
59 | ))}
60 |
61 |