feat: update next to v13.4

app/(home)/NewsletterSignup.tsx → app/Newsletter.tsx

@@ -20,7 +20,7 @@ export const newsletterFormSchema = z.object({
 })
 export type NewsletterForm = z.infer<typeof newsletterFormSchema>
 
-export function NewsletterSignup() {
+export function Newsletter() {
  const {
  register,
  handleSubmit,

app/_actions.ts

@@ -0,0 +1,44 @@
+'use server'
+
+import { z } from 'zod'
+
+import { env } from '~/env.mjs'
+import { withValidate } from '~/lib/validation'
+
+export const subscribeToNewsletter = withValidate(
+ z.object({
+ email: z.string().email({ message: '邮箱地址不正确' }).nonempty(),
+ }),
+ async ({ email }) => {
+ const url = [
+ 'https://api.convertkit.com/v3',
+ 'forms',
+ '5108903', // formId
+ 'subscribe',
+ ].join('/')
+
+ const headers = new Headers({
+ 'Content-Type': 'application/json; charset=utf-8',
+ })
+
+ const res = await fetch(url, {
+ method: 'POST',
+ headers,
+ cache: 'no-cache',
+ body: JSON.stringify({
+ api_key: env.CONVERTKIT_API_KEY,
+ email,
+ tags: [
+ // cali.so newsletter tag
+ 3817600,
+ // Chinese newsletter tag
+ 3817754,
+ ],
+ }),
+ })
+
+ if (!res.ok) {
+ throw new Error('Failed to subscribe')
+ }
+ }
+)

app/app.d.ts

@@ -1,16 +1,3 @@
-type MdxFrontMatter = {
- title: string
- publishedAt: string
- tags: string[]
- image?: string
- summary?: string
-}
-type MDXComponent = {
- default: React.FC
- meta: MdxFrontMatter
-}
-
-declare module '*.mdx' {
- export default MDXComponent
- export const meta: MdxFrontMatter
+type NewsletterFormData = {
+ email: string
 }

app/page.tsx

@@ -1,7 +1,7 @@
-import { Headline } from '~/app/(home)/Headline'
-import { NewsletterSignup } from '~/app/(home)/NewsletterSignup'
-import { Photos } from '~/app/(home)/Photos'
-import { Resume } from '~/app/(home)/Resume'
+import { Headline } from '~/app/Headline'
+import { Newsletter } from '~/app/Newsletter'
+import { Photos } from '~/app/Photos'
+import { Resume } from '~/app/Resume'
 import { Container } from '~/components/ui/Container'
 
 export default function HomePage() {
@@ -15,7 +15,7 @@ export default function HomePage() {
  <div className="mx-auto grid max-w-xl grid-cols-1 gap-y-20 lg:max-w-none lg:grid-cols-2">
  <div className="flex flex-col gap-16"></div>
  <aside className="space-y-10 lg:pl-16 xl:pl-24">
- <NewsletterSignup />
+ <Newsletter />
  <Resume />
  </aside>
  </div>

lib/validation.ts

@@ -0,0 +1,10 @@
+import { type ZodSchema } from 'zod'
+
+export function withValidate<TData>(
+ schema: ZodSchema<TData>,
+ action: (data: TData) => void
+) {
+ return (formData: FormData) => {
+ return action(schema.parse(Object.fromEntries(formData.entries())))
+ }
+}

next.config.mjs

@@ -1,11 +1,4 @@
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import withMdx from '@next/mdx'
 import { get } from '@vercel/edge-config'
-import rehypeAutolinkHeadings from 'rehype-autolink-headings'
-import rehypePrettyCode from 'rehype-pretty-code'
-import rehypeSlug from 'rehype-slug'
-import remarkGfm from 'remark-gfm'
 
 /**
  * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
@@ -15,13 +8,12 @@ import remarkGfm from 'remark-gfm'
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
- experimental: {
- appDir: true,
- scrollRestoration: true,
- },
+ // experimental: {
+ // serverActions: true,
+ // },
 
  images: {
- domains: ['assets.cali.so'],
+ domains: ['cdn.sanity.io'],
  },
 
  async redirects() {
@@ -33,39 +25,4 @@ const nextConfig = {
  },
 }
 
-export default withMdx({
- extension: /\.mdx?$/,
- options: {
- remarkPlugins: [remarkGfm],
- rehypePlugins: [
- rehypeSlug,
- [
- rehypePrettyCode,
- {
- theme: 'one-dark-pro',
- onVisitLine(node) {
- // Prevent lines from collapsing in `display: grid` mode, and allow empty
- // lines to be copy/pasted
- if (node.children.length === 0) {
- node.children = [{ type: 'text', value: ' ' }]
- }
- },
- onVisitHighlightedLine(node) {
- node.properties.className.push('line--highlighted')
- },
- onVisitHighlightedWord(node) {
- node.properties.className = ['word--highlighted']
- },
- },
- ],
- [
- rehypeAutolinkHeadings,
- {
- properties: {
- className: ['anchor'],
- },
- },
- ],
- ],
- },
-})(nextConfig)
+export default nextConfig

package.json

@@ -9,24 +9,23 @@
  "lint": "next lint"
  },
  "dependencies": {
- "@clerk/nextjs": "^4.16.4",
+ "@clerk/nextjs": "^4.17.0",
  "@headlessui/react": "^1.7.14",
  "@hookform/resolvers": "^3.1.0",
  "@mdx-js/loader": "^2.3.0",
- "@next/mdx": "^13.3.4",
  "@portabletext/react": "^3.0.0",
  "@radix-ui/react-select": "^1.2.1",
  "@radix-ui/react-tooltip": "^1.0.5",
  "@sanity/image-url": "^1.0.2",
- "@upstash/redis": "^1.20.5",
- "@vercel/analytics": "^1.0.0",
+ "@upstash/redis": "^1.20.6",
+ "@vercel/analytics": "^1.0.1",
  "@vercel/edge-config": "^0.1.9",
  "@zolplay/react": "^0.5.1",
  "@zolplay/utils": "^1.3.4",
  "dayjs": "^1.11.7",
  "framer-motion": "^10.12.7",
- "next": "^13.3.4",
- "next-sanity": "^4.2.0",
+ "next": "^13.4.0",
+ "next-sanity": "^4.3.2",
  "next-themes": "^0.2.1",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
@@ -44,16 +43,15 @@
  "devDependencies": {
  "@tailwindcss/typography": "^0.5.9",
  "@types/eslint": "^8.37.0",
- "@types/mdx": "^2.0.5",
  "@types/node": "^18.16.3",
  "@types/prettier": "^2.7.2",
- "@types/react": "^18.2.0",
- "@types/react-dom": "^18.2.1",
+ "@types/react": "^18.2.5",
+ "@types/react-dom": "^18.2.3",
  "@typescript-eslint/eslint-plugin": "^5.59.2",
  "@typescript-eslint/parser": "^5.59.2",
  "autoprefixer": "^10.4.14",
  "eslint": "^8.39.0",
- "eslint-config-next": "^13.3.4",
+ "eslint-config-next": "^13.4.0",
  "eslint-plugin-prettier": "^4.2.1",
  "eslint-plugin-simple-import-sort": "^10.0.0",
  "eslint-plugin-unused-imports": "^2.0.0",