Next.js Pages Router Example is Confusing

[zhuojg]

I found the Next.js Pages Router quick start a bit confusing because it combines features of the App Router. In my opinion, it would be clearer if the example focused solely on the Pages Router.

If I’m not mistaken, implementing such an API in the Pages Router is actually straightforward using the pipeDataStreamToResponse function from the AI SDK. Here’s a simplified example:

import { openai } from '@ai-sdk/openai'
import { pipeDataStreamToResponse, streamText, type CoreMessage } from 'ai'
import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const {
    messages,
  }: {
    messages: CoreMessage[]
  } = req.body

  pipeDataStreamToResponse(res, {
    status: 200,
    execute: async (dataStream) => {
      const result = streamText({
        model: openai('gpt-4o'),
        messages,
      })
      result.mergeIntoDataStream(dataStream)
    },
    onError: (error) => `Custom error: ${error}`,
  })
}

While this method seems to work well for simple API streaming, I’m curious if there are any potential drawbacks or limitations to using the Pages Router this way. Are there any issues I might have overlooked, especially in terms of performance, scalability, or best practices? Has anyone faced challenges with this approach in real-world applications?

[ManuLpz4]

Hey, @zhuojg! How is it going?

I strongly recommend you to upgrade to the app router, it is the chosen one but I don't see any issues in using the pages router. At the end, is just a served resource on the web.