First approach

export default async function handler(
  req: request,
  res: response,
) {}

Second approach

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {}

Third approach

export default async function handler(
  req: NextRequest,
  res: NextResponse,
) {}

Fourth approach

export default async function POST / GET / etc...(
...
) {}

I've seen people use bunch of diffrent syntax don't know what is old what is new what should i use.... Could somebody explain which approach is best for latest next.js app router. The 4th with combination of 3rd one i am guessing but could somebody clear this up for me