Před pár dny vyšla nová verze nejpoužívanejšího stacku pro React: Next.js 5.0. Seznam změn lze nalézt na oficiálním blogu. Jednou z klíčových vlastností je i podpora pluginů a to zejména pluginu @zeit/next-typescript.
Samotný example od Next.js bohužel neposkytuje ukázku, jak zprovoznit custom server s Typescriptem. Pokud Vás zajímá, tak jak provozovat next-typescript plugin s custom serverem, tak čtěte dál :)
Custom server a Typescript
V případě, že používáte custom server, je třeba samotnou konfiguraci obohatit o několik dalších kroků.Začněme nejdříve přípravou skriptů v package.json:
"scripts": {
"prebuild": "rimraf dist/ && rimraf .next/",
"build": "next build && tsc --module commonjs",
"start": "NODE_ENV=production node dist/index.js",
"dev": "nodemon server/index.ts"
}
Dalším krokem je úprava tsconfig.json:
{
"compileOnSave": false,
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"jsx": "preserve",
"allowJs": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"removeComments": false,
"preserveConstEnums": true,
"sourceMap": true,
"skipLibCheck": true,
"outDir": "dist",
"baseUrl": ".",
"typeRoots": [
"./node_modules/@types"
],
"lib": [
"dom",
"es2015",
"es2016"
]
},
"include": [
"server/**/*.ts"
]
}
Soubor nodemon.json:
{
"watch": [
"server/**/*.ts"
],
"execMap": {
"ts": "ts-node --compilerOptions '{\"module\":\"commonjs\"}'"
}
}
Soubor next.config.js (v ukázce je i custom konfigurace webpacku):
require('dotenv').config();
const withTypescript = require('@zeit/next-typescript');
const webpack = require('webpack');
module.exports = withTypescript({
webpack(config) {
config.plugins = [
...config.plugins || [],
new webpack.DefinePlugin({
'process.env.BACKEND_ENDPOINT': JSON.stringify(process.env.BACKEND_ENDPOINT),
}),
];
return config;
},
});
Aby byl projekt validní, je třeba dodržet následujcící adresářovou strukturu:
- server/index.ts - custom node.js server
- pages/*.tsx - jednotlivé Next.js / React stránky
- .next/ - build samotného Next.js (viz npm run build)
- dist/index.js - zkompilovaný custom server (viz npm run build)
Závěr
Next.js a Typescript je nyní ve skvělé symbióze. Server side renderingu zdar! :)
Žádné komentáře:
Okomentovat