rayan/next-learn
1
0
Fork 0
mirror of https://github.com/vercel/next-learn.git synced 2026-06-11 09:51:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update the Learn codebase (#764)

Browse Source
This commit is contained in:
Lee Robinson
2024-06-23 22:48:40 -05:00
committed by GitHub
parent 9daf946b78
commit f535c37750
27 changed files with 845 additions and 6462 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.nvmrc
View File

@@ -1 +0,0 @@
18

3
dashboard/final-example/.eslintrc.json
View File

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

1
dashboard/final-example/.nvmrc
View File

@@ -1 +0,0 @@
18

2
dashboard/final-example/app/dashboard/layout.tsx
View File

@@ -1,7 +1,5 @@
import SideNav from '@/app/ui/dashboard/sidenav';
export const experimental_ppr = true;
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<div className="flex h-screen flex-col md:flex-row md:overflow-hidden">

10
dashboard/final-example/app/lib/data.ts
View File

@@ -8,12 +8,8 @@ import {
Revenue,
} from './definitions';
import { formatCurrency } from './utils';
import { unstable_noStore as noStore } from 'next/cache';
export async function fetchRevenue() {
// Add noStore() here to prevent the response from being cached.
// This is equivalent to in fetch(..., {cache: 'no-store'}).
noStore();
try {
// Artificially delay a response for demo purposes.
// Don't do this in production :)
@@ -33,7 +29,6 @@ export async function fetchRevenue() {
}
export async function fetchLatestInvoices() {
noStore();
try {
const data = await sql<LatestInvoiceRaw>`
SELECT invoices.amount, customers.name, customers.image_url, customers.email, invoices.id
@@ -54,7 +49,6 @@ export async function fetchLatestInvoices() {
}
export async function fetchCardData() {
noStore();
try {
// You can probably combine these into a single SQL query
// However, we are intentionally splitting them to demonstrate
@@ -94,7 +88,6 @@ export async function fetchFilteredInvoices(
query: string,
currentPage: number,
) {
noStore();
const offset = (currentPage - 1) * ITEMS_PER_PAGE;
try {
@@ -127,7 +120,6 @@ export async function fetchFilteredInvoices(
}
export async function fetchInvoicesPages(query: string) {
noStore();
try {
const count = await sql`SELECT COUNT(*)
FROM invoices
@@ -149,7 +141,6 @@ export async function fetchInvoicesPages(query: string) {
}
export async function fetchInvoiceById(id: string) {
noStore();
try {
const data = await sql<InvoiceForm>`
SELECT
@@ -193,7 +184,6 @@ export async function fetchCustomers() {
}
export async function fetchFilteredCustomers(query: string) {
noStore();
try {
const data = await sql<CustomersTableType>`
SELECT

15
dashboard/starter-example/app/lib/placeholder-data.js → dashboard/final-example/app/lib/placeholder-data.ts
View File

@@ -28,12 +28,6 @@ const customers = [
email: 'lee@robinson.com',
image_url: '/customers/lee-robinson.png',
},
{
id: '3958dc9e-787f-4377-85e9-fec4b6a6442a',
name: 'Steph Dietz',
email: 'steph@dietz.com',
image_url: '/customers/steph-dietz.png',
},
{
id: '76d65c26-f784-44a2-ac19-586678f7c2f2',
name: 'Michael Novotny',
@@ -86,7 +80,7 @@ const invoices = [
date: '2023-08-05',
},
{
customer_id: customers[7].id,
customer_id: customers[2].id,
amount: 54246,
status: 'pending',
date: '2023-07-16',
@@ -150,9 +144,4 @@ const revenue = [
{ month: 'Dec', revenue: 4800 },
];
module.exports = {
users,
customers,
invoices,
revenue,
};
export { users, customers, invoices, revenue };

118
dashboard/final-example/app/seed/route.ts Normal file
View File

@@ -0,0 +1,118 @@
import bcrypt from 'bcrypt';
import { db } from '@vercel/postgres';
import { invoices, customers, revenue, users } from '../lib/placeholder-data';
const client = await db.connect();
async function seedUsers() {
await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
await client.sql`
CREATE TABLE IF NOT EXISTS users (
id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
name VARCHAR(255) NOT NULL,
email TEXT NOT NULL UNIQUE,
password TEXT NOT NULL
);
`;
const insertedUsers = await Promise.all(
users.map(async (user) => {
const hashedPassword = await bcrypt.hash(user.password, 10);
return client.sql`
INSERT INTO users (id, name, email, password)
VALUES (${user.id}, ${user.name}, ${user.email}, ${hashedPassword})
ON CONFLICT (id) DO NOTHING;
`;
}),
);
return insertedUsers;
}
async function seedInvoices() {
await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
await client.sql`
CREATE TABLE IF NOT EXISTS invoices (
id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
customer_id UUID NOT NULL,
amount INT NOT NULL,
status VARCHAR(255) NOT NULL,
date DATE NOT NULL
);
`;
const insertedInvoices = await Promise.all(
invoices.map(
(invoice) => client.sql`
INSERT INTO invoices (customer_id, amount, status, date)
VALUES (${invoice.customer_id}, ${invoice.amount}, ${invoice.status}, ${invoice.date})
ON CONFLICT (id) DO NOTHING;
`,
),
);
return insertedInvoices;
}
async function seedCustomers() {
await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
await client.sql`
CREATE TABLE IF NOT EXISTS customers (
id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
name VARCHAR(255) NOT NULL,
email VARCHAR(255) NOT NULL,
image_url VARCHAR(255) NOT NULL
);
`;
const insertedCustomers = await Promise.all(
customers.map(
(customer) => client.sql`
INSERT INTO customers (id, name, email, image_url)
VALUES (${customer.id}, ${customer.name}, ${customer.email}, ${customer.image_url})
ON CONFLICT (id) DO NOTHING;
`,
),
);
return insertedCustomers;
}
async function seedRevenue() {
await client.sql`
CREATE TABLE IF NOT EXISTS revenue (
month VARCHAR(4) NOT NULL UNIQUE,
revenue INT NOT NULL
);
`;
const insertedRevenue = await Promise.all(
revenue.map(
(rev) => client.sql`
INSERT INTO revenue (month, revenue)
VALUES (${rev.month}, ${rev.revenue})
ON CONFLICT (month) DO NOTHING;
`,
),
);
return insertedRevenue;
}
export async function GET() {
try {
await client.sql`BEGIN`;
await seedUsers();
await seedCustomers();
await seedInvoices();
await seedRevenue();
await client.sql`COMMIT`;
return Response.json({ message: 'Database seeded successfully' });
} catch (error) {
await client.sql`ROLLBACK`;
return Response.json({ error }, { status: 500 });
}
}

5
dashboard/final-example/app/ui/customers/table.tsx
View File

@@ -1,10 +1,7 @@
import Image from 'next/image';
import { lusitana } from '@/app/ui/fonts';
import Search from '@/app/ui/search';
import {
CustomersTableType,
FormattedCustomersTable,
} from '@/app/lib/definitions';
import { FormattedCustomersTable } from '@/app/lib/definitions';
export default async function CustomersTable({
customers,

1
dashboard/final-example/app/ui/dashboard/latest-invoices.tsx
View File

@@ -3,6 +3,7 @@ import clsx from 'clsx';
import Image from 'next/image';
import { lusitana } from '@/app/ui/fonts';
import { fetchLatestInvoices } from '@/app/lib/data';
export default async function LatestInvoices() {
const latestInvoices = await fetchLatestInvoices();

2
dashboard/final-example/app/ui/invoices/buttons.tsx
View File

@@ -30,7 +30,7 @@ export function DeleteInvoice({ id }: { id: string }) {
return (
<form action={deleteInvoiceWithId}>
<button className="rounded-md border p-2 hover:bg-gray-100">
<button type="submit" className="rounded-md border p-2 hover:bg-gray-100">
<span className="sr-only">Delete</span>
<TrashIcon className="w-5" />
</button>

6
dashboard/final-example/next.config.mjs
View File

@@ -1,9 +1,5 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
ppr: 'incremental',
},
};
const nextConfig = {};
export default nextConfig;

45
dashboard/final-example/package.json
View File

@@ -3,43 +3,32 @@
"scripts": {
"build": "next build",
"dev": "next dev",
"lint": "next lint",
"prettier": "prettier --write --ignore-unknown .",
"prettier:check": "prettier --check --ignore-unknown .",
"seed": "node -r dotenv/config ./scripts/seed.js",
"start": "next start"
},
"dependencies": {
"@heroicons/react": "^2.0.18",
"@heroicons/react": "^2.1.4",
"@tailwindcss/forms": "^0.5.7",
"@types/node": "20.5.7",
"@vercel/postgres": "^0.5.0",
"autoprefixer": "10.4.15",
"@vercel/postgres": "^0.8.0",
"autoprefixer": "10.4.19",
"bcrypt": "^5.1.1",
"clsx": "^2.0.0",
"next": "15.0.0-canary.28",
"next-auth": "^5.0.0-beta.4",
"postcss": "8.4.31",
"react": "19.0.0-rc-6230622a1a-20240610",
"react-dom": "19.0.0-rc-6230622a1a-20240610",
"tailwindcss": "3.3.3",
"typescript": "5.2.2",
"use-debounce": "^9.0.4",
"zod": "^3.22.2"
"clsx": "^2.1.1",
"next": "15.0.0-rc.0",
"next-auth": "5.0.0-beta.19",
"postcss": "8.4.38",
"react": "19.0.0-rc-f994737d14-20240522",
"react-dom": "19.0.0-rc-f994737d14-20240522",
"tailwindcss": "3.4.4",
"typescript": "5.5.2",
"use-debounce": "^10.0.1",
"zod": "^3.23.8"
},
"devDependencies": {
"@types/bcrypt": "^5.0.1",
"@types/bcrypt": "^5.0.2",
"@types/node": "20.14.8",
"@types/react": "18.3.3",
"@types/react-dom": "18.3.0",
"@vercel/style-guide": "^5.0.1",
"dotenv": "^16.3.1",
"eslint": "^8.52.0",
"eslint-config-next": "15.0.0-rc.0",
"eslint-config-prettier": "9.0.0",
"prettier": "^3.0.3",
"prettier-plugin-tailwindcss": "0.5.4"
"@types/react-dom": "18.3.0"
},
"engines": {
"node": ">=18.17.0"
"node": ">=20.12.0"
}
}

3357
dashboard/final-example/pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

6
dashboard/final-example/prettier.config.js
View File

@@ -1,6 +0,0 @@
const styleguide = require('@vercel/style-guide/prettier');
module.exports = {
...styleguide,
plugins: [...styleguide.plugins, 'prettier-plugin-tailwindcss'],
};

BIN
dashboard/final-example/public/customers/steph-dietz.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.0 KiB

179
dashboard/final-example/scripts/seed.js
View File

@@ -1,179 +0,0 @@
const { db } = require('@vercel/postgres');
const {
invoices,
customers,
revenue,
users,
} = require('../app/lib/placeholder-data.js');
const bcrypt = require('bcrypt');
async function seedUsers(client) {
try {
await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
// Create the "users" table if it doesn't exist
const createTable = await client.sql`
CREATE TABLE IF NOT EXISTS users (
id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
name VARCHAR(255) NOT NULL,
email TEXT NOT NULL UNIQUE,
password TEXT NOT NULL
);
`;
console.log(`Created "users" table`);
// Insert data into the "users" table
const insertedUsers = await Promise.all(
users.map(async (user) => {
const hashedPassword = await bcrypt.hash(user.password, 10);
return client.sql`
INSERT INTO users (id, name, email, password)
VALUES (${user.id}, ${user.name}, ${user.email}, ${hashedPassword})
ON CONFLICT (id) DO NOTHING;
`;
}),
);
console.log(`Seeded ${insertedUsers.length} users`);
return {
createTable,
users: insertedUsers,
};
} catch (error) {
console.error('Error seeding users:', error);
throw error;
}
}
async function seedInvoices(client) {
try {
await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
// Create the "invoices" table if it doesn't exist
const createTable = await client.sql`
CREATE TABLE IF NOT EXISTS invoices (
id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
customer_id UUID NOT NULL,
amount INT NOT NULL,
status VARCHAR(255) NOT NULL,
date DATE NOT NULL
);
`;
console.log(`Created "invoices" table`);
// Insert data into the "invoices" table
const insertedInvoices = await Promise.all(
invoices.map(
(invoice) => client.sql`
INSERT INTO invoices (customer_id, amount, status, date)
VALUES (${invoice.customer_id}, ${invoice.amount}, ${invoice.status}, ${invoice.date})
ON CONFLICT (id) DO NOTHING;
`,
),
);
console.log(`Seeded ${insertedInvoices.length} invoices`);
return {
createTable,
invoices: insertedInvoices,
};
} catch (error) {
console.error('Error seeding invoices:', error);
throw error;
}
}
async function seedCustomers(client) {
try {
await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
// Create the "customers" table if it doesn't exist
const createTable = await client.sql`
CREATE TABLE IF NOT EXISTS customers (
id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
name VARCHAR(255) NOT NULL,
email VARCHAR(255) NOT NULL,
image_url VARCHAR(255) NOT NULL
);
`;
console.log(`Created "customers" table`);
// Insert data into the "customers" table
const insertedCustomers = await Promise.all(
customers.map(
(customer) => client.sql`
INSERT INTO customers (id, name, email, image_url)
VALUES (${customer.id}, ${customer.name}, ${customer.email}, ${customer.image_url})
ON CONFLICT (id) DO NOTHING;
`,
),
);
console.log(`Seeded ${insertedCustomers.length} customers`);
return {
createTable,
customers: insertedCustomers,
};
} catch (error) {
console.error('Error seeding customers:', error);
throw error;
}
}
async function seedRevenue(client) {
try {
// Create the "revenue" table if it doesn't exist
const createTable = await client.sql`
CREATE TABLE IF NOT EXISTS revenue (
month VARCHAR(4) NOT NULL UNIQUE,
revenue INT NOT NULL
);
`;
console.log(`Created "revenue" table`);
// Insert data into the "revenue" table
const insertedRevenue = await Promise.all(
revenue.map(
(rev) => client.sql`
INSERT INTO revenue (month, revenue)
VALUES (${rev.month}, ${rev.revenue})
ON CONFLICT (month) DO NOTHING;
`,
),
);
console.log(`Seeded ${insertedRevenue.length} revenue`);
return {
createTable,
revenue: insertedRevenue,
};
} catch (error) {
console.error('Error seeding revenue:', error);
throw error;
}
}
async function main() {
const client = await db.connect();
await seedUsers(client);
await seedCustomers(client);
await seedInvoices(client);
await seedRevenue(client);
await client.end();
}
main().catch((err) => {
console.error(
'An error occurred while attempting to seed the database:',
err,
);
});

3
dashboard/final-example/tsconfig.json
View File

@@ -18,6 +18,7 @@
"name": "next"
}
],
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
@@ -27,7 +28,7 @@
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts",
"app/lib/placeholder-data.js",
"app/lib/placeholder-data.ts",
"scripts/seed.js"
],
"exclude": ["node_modules"]

3
dashboard/starter-example/.eslintrc.json
View File

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

1
dashboard/starter-example/.nvmrc
View File

@@ -1 +0,0 @@
18

3
dashboard/starter-example/app/lib/data.ts
View File

@@ -10,9 +10,6 @@ import {
import { formatCurrency } from './utils';
export async function fetchRevenue() {
// Add noStore() here to prevent the response from being cached.
// This is equivalent to in fetch(..., {cache: 'no-store'}).
try {
// Artificially delay a response for demo purposes.
// Don't do this in production :)

15
dashboard/final-example/app/lib/placeholder-data.js → dashboard/starter-example/app/lib/placeholder-data.ts
View File

@@ -28,12 +28,6 @@ const customers = [
email: 'lee@robinson.com',
image_url: '/customers/lee-robinson.png',
},
{
id: '3958dc9e-787f-4377-85e9-fec4b6a6442a',
name: 'Steph Dietz',
email: 'steph@dietz.com',
image_url: '/customers/steph-dietz.png',
},
{
id: '76d65c26-f784-44a2-ac19-586678f7c2f2',
name: 'Michael Novotny',
@@ -86,7 +80,7 @@ const invoices = [
date: '2023-08-05',
},
{
customer_id: customers[7].id,
customer_id: customers[2].id,
amount: 54246,
status: 'pending',
date: '2023-07-16',
@@ -150,9 +144,4 @@ const revenue = [
{ month: 'Dec', revenue: 4800 },
];
module.exports = {
users,
customers,
invoices,
revenue,
};
export { users, customers, invoices, revenue };

118
dashboard/starter-example/app/seed/route.ts Normal file
View File

@@ -0,0 +1,118 @@
import bcrypt from 'bcrypt';
import { db } from '@vercel/postgres';
import { invoices, customers, revenue, users } from '../lib/placeholder-data';
const client = await db.connect();
async function seedUsers() {
await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
await client.sql`
CREATE TABLE IF NOT EXISTS users (
id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
name VARCHAR(255) NOT NULL,
email TEXT NOT NULL UNIQUE,
password TEXT NOT NULL
);
`;
const insertedUsers = await Promise.all(
users.map(async (user) => {
const hashedPassword = await bcrypt.hash(user.password, 10);
return client.sql`
INSERT INTO users (id, name, email, password)
VALUES (${user.id}, ${user.name}, ${user.email}, ${hashedPassword})
ON CONFLICT (id) DO NOTHING;
`;
}),
);
return insertedUsers;
}
async function seedInvoices() {
await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
await client.sql`
CREATE TABLE IF NOT EXISTS invoices (
id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
customer_id UUID NOT NULL,
amount INT NOT NULL,
status VARCHAR(255) NOT NULL,
date DATE NOT NULL
);
`;
const insertedInvoices = await Promise.all(
invoices.map(
(invoice) => client.sql`
INSERT INTO invoices (customer_id, amount, status, date)
VALUES (${invoice.customer_id}, ${invoice.amount}, ${invoice.status}, ${invoice.date})
ON CONFLICT (id) DO NOTHING;
`,
),
);
return insertedInvoices;
}
async function seedCustomers() {
await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
await client.sql`
CREATE TABLE IF NOT EXISTS customers (
id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
name VARCHAR(255) NOT NULL,
email VARCHAR(255) NOT NULL,
image_url VARCHAR(255) NOT NULL
);
`;
const insertedCustomers = await Promise.all(
customers.map(
(customer) => client.sql`
INSERT INTO customers (id, name, email, image_url)
VALUES (${customer.id}, ${customer.name}, ${customer.email}, ${customer.image_url})
ON CONFLICT (id) DO NOTHING;
`,
),
);
return insertedCustomers;
}
async function seedRevenue() {
await client.sql`
CREATE TABLE IF NOT EXISTS revenue (
month VARCHAR(4) NOT NULL UNIQUE,
revenue INT NOT NULL
);
`;
const insertedRevenue = await Promise.all(
revenue.map(
(rev) => client.sql`
INSERT INTO revenue (month, revenue)
VALUES (${rev.month}, ${rev.revenue})
ON CONFLICT (month) DO NOTHING;
`,
),
);
return insertedRevenue;
}
export async function GET() {
try {
await client.sql`BEGIN`;
await seedUsers();
await seedCustomers();
await seedInvoices();
await seedRevenue();
await client.sql`COMMIT`;
return Response.json({ message: 'Database seeded successfully' });
} catch (error) {
await client.sql`ROLLBACK`;
return Response.json({ error }, { status: 500 });
}
}

43
dashboard/starter-example/package.json
View File

@@ -3,39 +3,32 @@
"scripts": {
"build": "next build",
"dev": "next dev",
"prettier": "prettier --write --ignore-unknown .",
"prettier:check": "prettier --check --ignore-unknown .",
"start": "next start"
},
"dependencies": {
"@heroicons/react": "^2.0.18",
"@heroicons/react": "^2.1.4",
"@tailwindcss/forms": "^0.5.7",
"@types/node": "20.5.7",
"@vercel/postgres": "^0.5.0",
"autoprefixer": "10.4.15",
"@vercel/postgres": "^0.8.0",
"autoprefixer": "10.4.19",
"bcrypt": "^5.1.1",
"clsx": "^2.0.0",
"next": "15.0.0-canary.28",
"postcss": "8.4.31",
"react": "19.0.0-rc-6230622a1a-20240610",
"react-dom": "19.0.0-rc-6230622a1a-20240610",
"tailwindcss": "3.3.3",
"typescript": "5.2.2",
"zod": "^3.22.2"
"clsx": "^2.1.1",
"next": "15.0.0-rc.0",
"next-auth": "5.0.0-beta.19",
"postcss": "8.4.38",
"react": "19.0.0-rc-f994737d14-20240522",
"react-dom": "19.0.0-rc-f994737d14-20240522",
"tailwindcss": "3.4.4",
"typescript": "5.5.2",
"use-debounce": "^10.0.1",
"zod": "^3.23.8"
},
"devDependencies": {
"@types/bcrypt": "^5.0.1",
"@types/react": "18.2.21",
"@types/react-dom": "18.2.14",
"@vercel/style-guide": "^5.0.1",
"dotenv": "^16.3.1",
"eslint": "^8.52.0",
"eslint-config-next": "15.0.0-rc.0",
"eslint-config-prettier": "9.0.0",
"prettier": "^3.0.3",
"prettier-plugin-tailwindcss": "0.5.4"
"@types/bcrypt": "^5.0.2",
"@types/node": "20.14.8",
"@types/react": "18.3.3",
"@types/react-dom": "18.3.0"
},
"engines": {
"node": ">=18.17.0"
"node": ">=20.12.0"
}
}

3365
dashboard/starter-example/pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

BIN
dashboard/starter-example/public/customers/steph-dietz.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.0 KiB

3
dashboard/starter-example/tsconfig.json
View File

@@ -18,6 +18,7 @@
"name": "next"
}
],
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
@@ -27,7 +28,7 @@
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts",
"app/lib/placeholder-data.js",
"app/lib/placeholder-data.ts",
"scripts/seed.js"
],
"exclude": ["node_modules"]

2
license.md
View File

@@ -1,6 +1,6 @@
The MIT License (MIT)
Copyright (c) 2023 Vercel, Inc.
Copyright (c) 2024 Vercel, Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal