2024 年我用哪些 Tech Stack 來重構自己的網頁

import type { NextApiRequest, NextApiResponse } from "next";
import { getSession } from "next-auth/react";
import { deleteFeed, getFeed } from "@/server/feed/services";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const session = await getSession({ req });
  if (!session) {
    return res.status(401).json({ message: "Unauthorized" });
  }
  switch (req.method) {
    case "delete":
      try {
        const result = await deleteFeed(req.query.feedId as string);
        return res.status(204).json(null);
      } catch (error) {
        console.log(error);
        return res.status(400).json({ message: "Bad Request" });
      }
    case "get":
      try {
        const result = await getFeed(req.query.feedId as string);
        return res.status(200).json(result);
      } catch (error) {
        console.log(error);
        return res.status(400).json({ message: "Bad Request" });
      }
    default:
        return res.status(405).json({ message: "Method Not Allowed" });
  }
}

const getFeedById = async (feedId: string): Promise<
  ApiResponse<
    {
      id: string;
      name: string;
      // ...
    }[]
  >
> => {
  try {
    const res = await fetch(`/api/sign/${feedId}`, {
        method: "GET",
        credentials: "include",
    });
    if(!res.ok) {
        // handle error
    }
    return await res.json();
  } catch (error) {
    // handle 500 error
  }
};

import { Hono } from 'hono'
const app = new Hono()

app.get('/', (c) => c.text('Hono!'))

export default app

import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";
import { db } from "@/db"; // your drizzle instance
 
export const auth = betterAuth({
    database: drizzleAdapter(db, {
        provider: "pg", // or "mysql", "sqlite"
    }),
    socialProviders: { 
        github: { 
            clientId: process.env.GITHUB_CLIENT_ID, 
            clientSecret: process.env.GITHUB_CLIENT_SECRET, 
        } 
    }, 
});

import NextAuth from "next-auth"
import GitHub from "next-auth/providers/github"
export const { auth, handlers } = NextAuth({ providers: [GitHub] })

export { auth as middleware } from "@/libs/auth"

import { handlers } from "@/libs/auth"
export const { GET, POST } = handlers

const session = await auth.api.getSession({ headers: c.req.raw.headers });
//    ^^^ 處理驗證

import { serialize } from 'next-mdx-remote/serialize'
import { MDXRemote } from 'next-mdx-remote'

const components = { Test }

export default function Page({ source }) {
  return (
    <div className="wrapper">
      <MDXRemote {...source} components={components} />
    </div>
  )
}

export async function getStaticProps() {
  // MDX text - can be from a local file, database, anywhere
  const source = 'Some **mdx** text'
  const mdxSource = await serialize(source, {
    parseFrontmatter: false,
    mdxOptions: {
      remarkPlugins: [],
      rehypePlugins: [],
    },
  })
  return { props: { source: mdxSource } }
}

import { MDXRemote } from 'next-mdx-remote/rsc'
import { compileMDX } from "next-mdx-remote/rsc";

const components = {
  h1: (props) => (
    <h1 {...props} className="large-text">
      {props.children}
    </h1>
  ),
}

function MDXContent(props) {
  return (
    <MDXRemote
      {...props}
      components={{ ...components, ...(props.components || {}) }}
      options={{
        parseFrontmatter: false,
        mdxOptions: {
          remarkPlugins: [],
          rehypePlugins: [],
        },
      }}
    />
  )
}

const Page = async ({
  params,
}: {
  params: Promise<{
    slug: string;
  }>;
}) => {
  const { slug } = await params;
  const content = await getContent(slug)
  //                    ^^^ any fs function

  return <MDXContent source={content}>
}

export default Page;

import { compileMDX } from "@fumadocs/mdx-remote";

import { FumadocsComponents, V1MDXComponents } from "./mdx-components";

const Page = async ({
  params,
}: {
  params: Promise<{
    slug: string;
  }>;
}) => {
  const { slug } = await params;
  const content = await getContent(slug)
  //                    ^^^ get content from database
  const compiled = await compileMDX({
    source: content,
    components: {
      ...FumadocsComponents,
      ...V1MDXComponents,
    },
    mdxOptions: {
      remarkPlugins: [],
      rehypePlugins: [],
    },
  });
  return <compiled.body />
}

const result = await db.query.users.findFirst({
  where: (users, { eq }) => eq(users.id, dto.userId),
	with: {
		posts: true			
	},
});

const result = await db
	.select()
	.from(countries)
	.leftJoin(cities, eq(cities.countryId, countries.id))
	.where(eq(countries.id, 10))

pnpm drizzle-kit generate
pnpm drizzle-kit migrate
pnpm drizzle-kit push
pnpm drizzle-kit pull
pnpm drizzle-kit check
pnpm drizzle-kit up
pnpm drizzle-kit studio

generator client {
  provider = "prisma-client-js"
  previewFeatures = ["jsonProtocol"]
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

enum Role {
  ADMIN
  USER
}

model Post {
  id          String   @id @default(cuid())
  slug        String   @unique
  title       String
  excerpt     String
  tags        String[]
  headImg     String?
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
  readTime    Int?
  readingMins String?
  published   Boolean  @default(false)
  content     String
  user        User     @relation(fields: [userId], references: [id], onDelete: Cascade)
  userId      String
}

const result = await prisma
  .post
  .findMany({
    take: opts.input.take,
    skip: opts.input.skip,
    orderBy: { [opts.input.orderBy]: opts.input.sortOrder },
  })