Refactor pages and layouts to use PageProps/LayoutProps

packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/[commentAuthor]/[commentRkey]/_lib/page-data.tsx

@@ -7,12 +7,9 @@ import {
 import { getPost } from "@/lib/data/db/post";
 import { notFound } from "next/navigation";
 
-export type CommentPageParams = {
-  commentRkey: string;
-  postRkey: string;
-  postAuthor: string;
-  commentAuthor: string;
-};
+export type CommentPageParams = Awaited<
+  PageProps<"/post/[postAuthor]/[postRkey]/[commentAuthor]/[commentRkey]">["params"]
+>;
 
 export async function getCommentPageData(params: CommentPageParams) {
   const [postAuthorDid, commentAuthorDid] = await Promise.all([

packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/[commentAuthor]/[commentRkey]/og-image/route.tsx

@@ -8,7 +8,7 @@ import {
   OgWrapper,
   frontpageOgImageResponse,
 } from "@/lib/og";
-import { type CommentPageParams, getCommentPageData } from "../_lib/page-data";
+import { getCommentPageData } from "../_lib/page-data";
 import { getBlueskyProfile } from "@/lib/data/user";
 import { shouldHideComment } from "@/lib/data/db/comment";
 import { notFound } from "next/navigation";
@@ -19,7 +19,9 @@ export const revalidate = 3600; // 1 hour
 
 export async function GET(
   _req: Request,
-  { params }: { params: Promise<CommentPageParams> },
+  {
+    params,
+  }: RouteContext<"/post/[postAuthor]/[postRkey]/[commentAuthor]/[commentRkey]/og-image">,
 ) {
   const { comment } = await getCommentPageData(await params);
   if ((await shouldHideComment(comment)) || comment.status !== "live") {

packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/[commentAuthor]/[commentRkey]/page.tsx

@@ -17,9 +17,9 @@ function getPagePath(params: CommentPageParams) {
   return `/post/${params.postAuthor}/${params.postRkey}/${params.commentAuthor}/${params.commentRkey}`;
 }
 
-export async function generateMetadata(props: {
-  params: Promise<CommentPageParams>;
-}): Promise<Metadata> {
+export async function generateMetadata(
+  props: PageProps<"/post/[postAuthor]/[postRkey]/[commentAuthor]/[commentRkey]">,
+): Promise<Metadata> {
   const params = await props.params;
   const { comment, post } = await getCommentPageData(params);
 
@@ -56,9 +56,9 @@ export async function generateMetadata(props: {
   };
 }
 
-export default async function CommentPage(props: {
-  params: Promise<CommentPageParams>;
-}) {
+export default async function CommentPage(
+  props: PageProps<"/post/[postAuthor]/[postRkey]/[commentAuthor]/[commentRkey]">,
+) {
   const params = await props.params;
   const { comment, post } = await getCommentPageData(params);
 

packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/_lib/page-data.tsx

@@ -3,10 +3,9 @@ import { getDidFromHandleOrDid } from "@/lib/data/atproto/identity";
 import { getPost } from "@/lib/data/db/post";
 import { notFound } from "next/navigation";
 
-export type PostPageParams = {
-  postAuthor: string;
-  postRkey: string;
-};
+export type PostPageParams = Awaited<
+  PageProps<"/post/[postAuthor]/[postRkey]">["params"]
+>;
 
 export async function getPostPageData(params: PostPageParams) {
   const authorDid = await getDidFromHandleOrDid(params.postAuthor);

packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/layout.tsx

@@ -8,15 +8,9 @@ import { Spinner } from "@/lib/components/ui/spinner";
 import { NewComment } from "./_lib/comment-client";
 import { SuperHackyScrollToTop } from "./scroller";
 
-type Params = {
-  postRkey: string;
-  postAuthor: string;
-};
-
-export default async function PostLayout(props: {
-  children: React.ReactNode;
-  params: Promise<Params>;
-}) {
+export default async function PostLayout(
+  props: LayoutProps<"/post/[postAuthor]/[postRkey]">,
+) {
   const params = await props.params;
 
   const { children } = props;

packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/og-image/route.tsx

@@ -12,17 +12,12 @@ import {
 } from "@/lib/og";
 import { getPostPageData } from "../_lib/page-data";
 
-type Params = {
-  postRkey: string;
-  postAuthor: string;
-};
-
 export const dynamic = "force-static";
 export const revalidate = 3600; // 1 hour
 
 export async function GET(
   _req: Request,
-  { params }: { params: Promise<Params> },
+  { params }: RouteContext<"/post/[postAuthor]/[postRkey]/og-image">,
 ) {
   const { post } = await getPostPageData(await params);
   const profile = await getBlueskyProfile(post.authorDid);

packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/page.tsx

@@ -10,9 +10,9 @@ function getPagePath(params: PostPageParams) {
   return `/post/${params.postAuthor}/${params.postRkey}`;
 }
 
-export async function generateMetadata(props: {
-  params: Promise<PostPageParams>;
-}): Promise<Metadata> {
+export async function generateMetadata(
+  props: PageProps<"/post/[postAuthor]/[postRkey]">,
+): Promise<Metadata> {
   const params = await props.params;
   const { post } = await getPostPageData(params);
 
@@ -41,9 +41,9 @@ export async function generateMetadata(props: {
   };
 }
 
-export default async function PostPage(props: {
-  params: Promise<PostPageParams>;
-}) {
+export default async function PostPage(
+  props: PageProps<"/post/[postAuthor]/[postRkey]">,
+) {
   const params = await props.params;
   const { post, authorDid } = await getPostPageData(params);
   const comments = await getCommentsForPost(post.id);

packages/frontpage/app/(app)/post/new/page.tsx

@@ -6,19 +6,23 @@ export const metadata: Metadata = {
   robots: "noindex, nofollow",
 };
 
-export default async function NewPost(props: {
-  searchParams: Promise<Record<string, string>>;
-}) {
+export default async function NewPost(props: PageProps<"/post/new">) {
   const searchParams = await props.searchParams;
+  const defaultTitle =
+    typeof searchParams.title === "string"
+      ? searchParams.title
+      : searchParams.title?.[0];
+
+  const defaultUrl =
+    typeof searchParams.url === "string"
+      ? searchParams.url
+      : searchParams.url?.[0];
   return (
     <main className="flex flex-col gap-3">
       <h2 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
         New post
       </h2>
-      <NewPostForm
-        defaultTitle={searchParams.title}
-        defaultUrl={searchParams.url}
-      />
+      <NewPostForm defaultTitle={defaultTitle} defaultUrl={defaultUrl} />
     </main>
   );
 }

packages/frontpage/app/(app)/profile/[user]/page.tsx

@@ -24,13 +24,9 @@ import { reportUserAction } from "@/lib/components/user-hover-card";
 import { type Metadata } from "next";
 import { LinkAlternateAtUri } from "@/lib/components/link-alternate-at";
 
-type Params = {
-  user: string;
-};
-
-export async function generateMetadata(props: {
-  params: Promise<Params>;
-}): Promise<Metadata> {
+export async function generateMetadata(
+  props: PageProps<"/profile/[user]">,
+): Promise<Metadata> {
   const params = await props.params;
   const did = await getDidFromHandleOrDid(params.user);
   if (!did) {
@@ -57,7 +53,7 @@ export async function generateMetadata(props: {
   };
 }
 
-export default async function Profile(props: { params: Promise<Params> }) {
+export default async function Profile(props: PageProps<"/profile/[user]">) {
   await connection();
   const params = await props.params;
   const did = await getDidFromHandleOrDid(params.user);

packages/frontpage/app/(auth)/login/page.tsx

@@ -4,11 +4,7 @@ import { getUser } from "@/lib/data/user";
 import { Alert, AlertDescription, AlertTitle } from "@/lib/components/ui/alert";
 import { CrossCircledIcon } from "@radix-ui/react-icons";
 
-export default async function LoginPage({
-  searchParams,
-}: {
-  searchParams: Promise<{ error?: string }>;
-}) {
+export default async function LoginPage({ searchParams }: PageProps<"/login">) {
   const user = await getUser();
 
   if (user !== null) {

packages/frontpage/package.json

@@ -8,6 +8,7 @@
     "build-1pw": "NODE_OPTIONS=--use-openssl-ca op run --env-file=\"./.env.1pw\" -- next build",
     "build": "NODE_OPTIONS=--use-openssl-ca next build --turbopack",
     "start": "NODE_OPTIONS=--use-openssl-ca next start",
+    "typegen": "next typegen",
     "lint": "eslint .",
     "db:generate": "NODE_OPTIONS=--use-openssl-ca drizzle-kit generate",
     "db:migrate": "NODE_OPTIONS=--use-openssl-ca drizzle-kit migrate",

turbo.json

@@ -10,10 +10,14 @@
       "dependsOn": ["^build"]
     },
     "type-check": {
-      "dependsOn": ["^build"]
+      "dependsOn": ["^build", "typegen"]
     },
-    "lint": {
+    "typegen": {
       "dependsOn": ["^build"],
+      "outputs": [".next/types/**"]
+    },
+    "lint": {
+      "dependsOn": ["^build", "typegen"],
       "outputs": ["eslint_report.json"]
     },
     "test": {