35 | {messages.map((m) => (
36 |
37 | {m.role === "user" ? "User: " : "AI: "}
38 | {m.content}
39 |
40 | ))}
41 |
42 |
49 |
50 | );
51 | }
52 |
--------------------------------------------------------------------------------
/next-15-sfs/README.md:
--------------------------------------------------------------------------------
1 | This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
2 |
3 | ## Getting Started
4 |
5 | First, run the development server:
6 |
7 | ```bash
8 | npm run dev
9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | # or
14 | bun dev
15 | ```
16 |
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 |
19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20 |
21 | This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
22 |
23 | ## Learn More
24 |
25 | To learn more about Next.js, take a look at the following resources:
26 |
27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29 |
30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
31 |
32 | ## Deploy on Vercel
33 |
34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35 |
36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
37 |
--------------------------------------------------------------------------------
/start-sfs/app/routes/typesafe.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import { createFileRoute } from "@tanstack/react-router";
3 | import { createServerFn } from "@tanstack/start";
4 |
5 | import { Input } from "../components/ui/input";
6 |
7 | const mergeName = createServerFn(
8 | "POST",
9 | ({ first, last }: { first: string; last: string }) => {
10 | "use server";
11 | return {
12 | fullName: `${first} ${last}`,
13 | sortable: `${last}, ${first}`,
14 | };
15 | }
16 | );
17 |
18 | export const Route = createFileRoute("/typesafe")({
19 | component: Home,
20 | });
21 |
22 | function Home() {
23 | const [first, setFirst] = useState("Sarah");
24 | const [last, setLast] = useState("Connor");
25 | const [fullName, setFullName] = useState("");
26 | const [sortable, setSortable] = useState("");
27 |
28 | async function updateFullName() {
29 | const result = await mergeName({ first, last });
30 | setFullName(result.fullName);
31 | setSortable(result.sortable);
32 | }
33 |
34 | useEffect(() => {
35 | updateFullName();
36 | }, [first, last]);
37 |
38 | return (
39 |