Skip to content

Commit 4b3edc4

Browse files
Ethan-ArrowoodEthan-Arrowood
committed
expand example to use new @harperdb/nextjs component
1 parent 66ca777 commit 4b3edc4

File tree

16 files changed

+7638
-592
lines changed

16 files changed

+7638
-592
lines changed

‎app/actions.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
'use server'
2+
3+
export async function listDogs() {
4+
const dogs = [];
5+
for await (const dog of tables.Dog.search()) {
6+
dogs.push({ id: dog.id, name: dog.name });
7+
}
8+
return dogs;
9+
}
10+
11+
export async function getDog(id) {
12+
return tables.Dog.get(id);
13+
}

‎app/client-component.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
'use client'
2+
3+
import { useEffect, useState } from "react";
4+
import { listDogs } from "@/app/actions"
5+
6+
export default function ClientComponent () {
7+
const [dogs, setDogs] = useState([]);
8+
9+
useEffect(() => {
10+
listDogs().then(dogs => setDogs(dogs));
11+
}, []);
12+
13+
return (
14+
<p>I'm a Client Component. There are <strong>{dogs.length}</strong> dogs in the Dog table.</p>
15+
)
16+
}

‎app/dogs/[id]/page.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { getDog, listDogs } from "@/app/actions";
2+
3+
export async function generateStaticParams() {
4+
const dogs = await listDogs();
5+
6+
return dogs;
7+
}
8+
9+
export default async function Dog({ params }) {
10+
11+
const dog = await getDog(params.id);
12+
13+
return (
14+
<section>
15+
<h1>{dog.name}</h1>
16+
<p>Woof!</p>
17+
</section>
18+
)
19+
}

‎app/dogs/layout.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import Link from "next/link";
2+
import { listDogs } from "@/app/actions";
3+
4+
export default async function Dogs({ children }) {
5+
6+
const dogs = await listDogs();
7+
8+
return (
9+
<>
10+
<section>
11+
<h2>Dogs</h2>
12+
<aside>This page is a Next.js Server Component employing Static Rendering. This is the default Next.js page experience. The list of dogs below was queried and the page was rendered all at <strong>build time</strong>.</aside>
13+
<p>Furthermore, this page has a subroute comprised of individual pages for each of the dogs. These pages were also generated at build time! Click on any dog in the list to see it's details.</p>
14+
<ol>
15+
{dogs.map(dog => (
16+
<li key={dog.id}><Link href={`/dogs/${dog.id}`}>{dog.name}</Link></li>
17+
))}
18+
</ol>
19+
</section>
20+
{children}
21+
</>
22+
)
23+
}

‎app/dogs/page.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default async function Page() {
2+
return <p>Select a dog!</p>
3+
}

‎app/favicon.ico‎

-25.3 KB
Binary file not shown.

‎app/globals.css‎

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

‎app/layout.js‎

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,37 @@
1-
import { Inter } from 'next/font/google'
2-
import './globals.css'
3-
4-
const inter = Inter({ subsets: ['latin'] })
1+
import Link from "next/link"
52

63
export const metadata = {
7-
title: 'Create Next App',
8-
description: 'Generated by create next app',
4+
title: 'HarperDB - Next.js App',
95
}
106

117
export default function RootLayout({ children }) {
128
return (
139
<html lang="en">
14-
<body className={inter.className}>{children}</body>
10+
<body style={{ width: '500px', fontFamily: 'sans-serif' }}>
11+
<header>
12+
<nav>
13+
<ul style={{ display: 'flex', gap: '1rem', listStyle: 'none', padding: 0 }}>
14+
<li>
15+
<Link href="/">Home</Link>
16+
</li>
17+
<li>
18+
<Link href="/dogs">Dogs</Link>
19+
</li>
20+
</ul>
21+
</nav>
22+
</header>
23+
<main>
24+
<section style={{ borderBottom: '1px solid' }}>
25+
<h1>HarperDB Next.js Example Application</h1>
26+
<p>This application demonstrates multiple distinct Next.js features.</p>
27+
28+
<p>Use the navigation links to try different page types.</p>
29+
30+
<p>Dig into the source code here: <Link href="https://github.com/HarperDB-Add-Ons/nextjs-example">HarperDB-Add-Ons/nextjs-example</Link></p>
31+
</section>
32+
{children}
33+
</main>
34+
</body>
1535
</html>
1636
)
1737
}

‎app/page.js‎

Lines changed: 6 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,9 @@
1-
import styles from './page.module.css'
2-
const { Dog } = tables;
1+
import Link from "next/link";
32

4-
export default async function Home() {
5-
let dogs = [];
6-
// get a list of dogs to render. note that nextjs's rendering doesn't (yet) support async iterators, so
7-
// we have to accumulate these first
8-
for await (let dog of Dog.search({})) {
9-
dogs.push(dog);
10-
}
3+
export default async function Page() {
114
return (
12-
<main className={styles.main}>
13-
<div className={styles.description}>
14-
<p>
15-
Here are some dogs:
16-
<ul>
17-
{dogs.map((dog) => (
18-
<li>{dog.name}</li>
19-
))}
20-
</ul>
21-
</p>
22-
</div>
23-
</main>
5+
<section>
6+
<p>Check out the <Link href="/dogs">Dogs</Link> page to get started.</p>
7+
</section>
248
)
25-
}
9+
}

0 commit comments

Comments
 (0)