Nextjs puede ser de gran ayuda para sacarle provecho a Reactjs, cuando le agregamos TypeScript puede llegar a ser aún mejor.
1- Crear un proyecto de Nextjs, como de costumbre usando npx
:
npx create-next-app nextjs-con-typescript --use-npm
2- Agregamos las dependencias necesarias:
npm install --save-dev typescript @types/react @types/node
Una vez instalado todo lo necesario le puedes cambiar la extension al archivo pages/index.js
a pages/index.tsx
entonces Nextjs generará automáticamente el archivo tsconfig.json
que es donde se guardan las configuraciones para transpilar TypeScript.
Listo! Ahora puedes ejecutar tu proyecto y funcionará según lo esperado
npm run dev
Puedes notar que también se generó el archivo next-env.d.ts
en la raíz del proyecto, no necesitamos tocarlo.
Tipos incluidos
Por otro lado Nextjs incluye los tipos que puedas necesitar, para cada uno de los métodos de renderizado:
1
2
3
4
5
6
7
8
9
10
11
12
13
import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next'
export const getStaticProps: GetStaticProps = async context => {
// ...
}
export const getStaticPaths: GetStaticPaths = async () => {
// ...
}
export const getServerSideProps: GetServerSideProps = async context => {
// ...
}
Tipos para los controladores del api:
1
2
3
4
5
import { NextApiRequest, NextApiResponse } from 'next'
export default (req: NextApiRequest, res: NextApiResponse) => {
// ...
}
Para el archivo _app.tsx
en caso de que quieras personalizarlo:
1
2
3
4
5
6
7
import type { AppProps } from 'next/app'
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}
export default MyApp
También para el archivo _document.tsx
:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import Document, { DocumentContext, Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await Document.getInitialProps(ctx);
return initialProps;
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
De estas formas Nextjs nos permite incluir TypeScript y sacarle el máximo provecho.