úterý 20. února 2018

Nová verze Next.js 5 a Typescript


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

React a hrátky s TypeScriptem

V minulosti jsem se již několikrát zmiňoval, že používat JavaScript bez statických typů, je stejné jako jezdit na kole poslepu. Nemusí se...