export async function GET(request) {
  // GET URL参数
  const { searchParams } = new URL(request.url);
  const id = searchParams.get('id');

  // Form提交的参数
  const formData = await request.formData();
  const name = formData.get('name');
  const age = formData.get('age');
  console.log('name', name, 'age', age)

  // POST json体
  const res = await request.json();
  console.log(res);

  return new Response('Result Content', {
    status: 200,
  });
}

export async function GET(request, { params }) {
  // Rest参数
  const id = params.id;

  const res = await fetch(`http://jsonplaceholder.typicode.com/users/${id}`, { 'cache': 'no-cache' });
  const users = await res.json();
  return NextResponse.json(users);
}

export async function GET(request) {
  // 使用 NextResponse
  const res = await fetch(`http://jsonplaceholder.typicode.com/users/${id}`, { 'cache': 'no-cache' });
  const users = await res.json();
  return NextResponse.json(users);

  // 使用 Response
  return new Response('{"status":"ok"}', {
    status: 200,
    headers: {
      'Content-type': 'application/json'
    }
  })
}

import { cookies, headers } from 'next/headers'

export async function GET(request) {
  // 使用 cookie
  const cookieStore = cookies()
  const token = cookieStore.get('token')

  // 使用 header
  const headersList = headers()
  const referer = headersList.get('referer')

  // 跨域
  return new Response('success', {
    status: 200,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
    },
  })
}

'use client'
import React, { useRef } from "react";
import { experimental_useFormStatus as useFormStatus } from 'react-dom'

export default function Home() {
  const formRef = useRef();

  // 试验性功能，为表单提供一个 pending 的状态
  const { pending } = useFormStatus()

  async function handleSubmit(formData) {
    // get 获取对应值
    const username = formData.get('username');
    const password = formData.get('password');

    // 不需要使用 { 'username': username, 'password': password } 组装
    // 使用这种方式会默认生成 key
    console.log({username, password});

    // 使用 useRef 重制表单
    formRef.current.reset();
  }

  return (
    <div>
      <form action={handleSubmit} style= ref={formRef}>
        <input type="text" name="username" placeholder="username" required />
        <input type="password" name="password" placeholder="password" required />

        <button type="submit" disabled={pending}>
          { pending ? 'Loading...' : 'Submit' }
        </button>
      </form>
    </div>
  )
}