Version 9

Core Idea

Guia de upgrade de Next.js 8 para 9: introduz pages/api/ como API Routes, exporta config como configuração de página, e remove diversas APIs legadas (@zeit/next-typescript, withAmp, comportamento de next/dynamic).

Key Concepts

• pages/api/: passa a ser tratado como API Routes; arquivos nesse diretório não geram mais bundle client-side.
• export const config: nome de export reservado para configuração de página (AMP opt-in, API Routes); não pode mais ser usado para outro propósito.
• next/dynamic loading behavior: para de renderizar "loading..." por default; customizável via propriedade loading.
• withAmp removido: substituído por export const config = { amp: true }.
• next export sem index.html: pages/about.js exporta para out/about.html em vez de out/about/index.html (reversível com trailingSlash: true).

Principais mudanças/features

• @zeit/next-typescript não é mais necessário; tipos publicados junto com next, @types/next deve ser desinstalado.
• Export config reservado para page-level config.
• next/dynamic não renderiza "loading..." por default.
• withAmp HOC removido, substituído por page config export.
• next export muda formato de output de arquivos.
• pages/api/ vira API Routes dedicado.
• Deprecated: carregamento de múltiplos módulos ao mesmo tempo em next/dynamic (aproximando de React.lazy/Suspense).

Code Examples

import dynamic from 'next/dynamic'

const DynamicComponentWithCustomLoading = dynamic(
  () => import('../components/hello2'),
  {
    loading: () => <p>Loading</p>,
  }
)

• O que demonstra: customizar o placeholder de loading, já que o default deixou de existir.

// Before
import { withAmp } from 'next/amp'
function Home() {
  return <h1>My AMP Page</h1>
}
export default withAmp(Home)

// After
export default function Home() {
  return <h1>My AMP Page</h1>
}
export const config = {
  amp: true,
}

• O que demonstra: migração de withAmp HOC para a export config reservada.

Reference Tables

Import antigo	Import novo (v9)
NextContext (next)	NextPageContext
NextAppContext, DefaultAppIProps (next/app)	AppContext, AppInitialProps
NextDocumentContext, DefaultDocumentIProps (next/document)	DocumentContext, DocumentInitialProps

Anti-patterns

• Exportar uma variável config para outro propósito não-Next.js: colide com a nova config reservada da página; renomear.
• Manter @types/next instalado: conflita com os tipos agora publicados dentro do próprio pacote next.
• Depender do carregamento de múltiplos módulos via next/dynamic: deprecated; migrar para múltiplas chamadas dynamic() individuais, uma por componente.

Key Takeaways

1. pages/api/ como API Routes é a mudança mais duradoura desta versão, ainda central no Pages Router.
2. getInitialProps vazio herdado de exemplos antigos de _app.js pode ser removido com segurança nesta versão.
3. Codemods add-missing-react-import, withamp-to-config, name-default-component e url-to-withrouter cobrem migrações mecânicas relacionadas a este período.

Connects To

• API Routes (Pages Router): comportamento estabelecido nesta versão.
• Codemods (ch333): withamp-to-config, name-default-component.