Usando getInitialProps en Next.js con TypeScript

Poseemos la mejor solución que hallamos por todo internet. Queremos que te resulte de mucha ayuda y si quieres compartir cualquier detalle que nos pueda ayudar a crecer hazlo con libertad.

Solución:

Las respuestas anteriores están desactualizadas ya que Next.js ahora admite oficialmente TypeScript (anuncio aquí)

Parte de esta versión son mejores tipos de TypeScript, con gran parte de Next.js escrito en TypeScript. Esto significa que el @types/next el paquete quedará en desuso en favor de las tipificaciones oficiales de Next.js.

En su lugar, debe importar el NextPage escriba y asígnelo a su componente. También puede escribir getInitialProps utilizando el NextPageContext escribe.

import  NextPage, NextPageContext  from 'next';

const MyComponent: NextPage = props => (
  // ...
)

interface Context extends NextPageContext 
  // any modifications to the default context, e.g. query types


MyComponent.getInitialProps = async (ctx: Context) => 
  // ...
  return props

EDITAR: esta respuesta está desactualizada desde el lanzamiento de Next 9. Consulte la respuesta anterior.

La forma clásica de resolver el problema es declarar getInitialProps como un static miembro:

class MyComponent extends React.Component<..., > 

  static async getInitialProps(ctx: any) 
    return ...
  

  render() ...

Cuando trabaje con componentes sin estado, puede declarar una extensión simple de React.SFC:

interface StatelessPage
 extends React.SFC
 
  getInitialProps?: (ctx: any) => Promise



const MyComponent: StatelessPage<...> = (...) => ...

MyComponent.getInitialProps = async (ctx) => ...

Los tipos para Next.js se mantienen en el proyecto DefinitelyTyped que tiene una nueva versión 7.0.6.

Para usar los nuevos tipos, asegúrese de importarlos en su proyecto:

npm install --save-dev @types/[email protected]

Así es como se escribe getInitialProps para un componente funcional sin estado:

import  NextFunctionComponent, NextContext  from 'next'

// Define what an individual item looks like
interface IDataObject 
  id: number,
  name: string


// Define the props that getInitialProps will inject into the component
interface IListComponentProps 
  items: IDataObject[]


const List: NextFunctionComponent = ( items ) => (
  

    items.map((item) => (
      

        item.id -- item.name
      
    ))
  
)

List.getInitialProps = async ( pathname : NextContext) => 
  const dataArray: IDataObject[] =
    [ id: 101, name: 'larry' ,  id: 102, name: 'sam' ,  id: 103, name: 'jill' ,  id: 104, name: pathname ]

  return  items: dataArray 


export default List

Así es como se escribe getInitialProps para una clase:

import React from 'react'
import  NextContext  from 'next'

// Define what an individual item looks like
interface IDataObject 
  id: number,
  name: string


// Define the props that getInitialProps will inject into the component
interface IListClassProps 
  items: IDataObject[]


class List extends React.Component 
  static async getInitialProps( pathname : NextContext) 
    const dataArray: IDataObject[] =
      [ id: 101, name: 'larry' ,  id: 102, name: 'sam' ,  id: 103, name: 'jill' ,  id: 104, name: pathname ]

    return  items: dataArray 
  

  render() 
    return (
      

        this.props.items.map((item) => (
          

            item.id -- item.name
          
        ))
      
    )
  


export default List

Si revisa las pruebas en DefinitelyTyped, puede obtener mucha información sobre cómo usar otras variaciones de los tipos para Siguiente.

Sección de Reseñas y Valoraciones

Agradecemos que quieras añadir valor a nuestro contenido asistiendo con tu veteranía en las observaciones.

---

---

Utiliza Nuestro Buscador