几乎没有搜索结果：“nextjs pug”. Google建议的结果是“nuxtjs pug”，这是一个完全不同的框架。
两个相关搜索结果之一是this issue。建议的最小设置需要太多的插件（我不明白为什么我需要每个插件），太复杂的配置，不适用于当前版本。

包.json

{
  "devdependencies": {
    "@babel/core": "^7.0.0-beta.51",
    "@babel/plugin-transform-react-jsx": "^7.0.0-beta.51",
    "@babel/plugin-transform-runtime": "^7.0.0-beta.51",
    "@babel/preset-env": "^7.0.0-beta.51",
    "@babel/runtime": "^7.0.0-beta.51",
    "babel-core": "7.0.0-bridge.0",
    "babel-plugin-transform-react-pug": "git://github.com/shirohana/babel-plugin-transform-react-pug.git#dist"
  }
}

.babelrc.js

module.exports = function (api) {
 api.env()
 return {
    presets: [
      ['@babel/env', { useBuiltIns: 'entry' }]
    ],
    plugins: [
      ['babel-plugin-transform-react-pug'],
      ['@babel/plugin-transform-react-jsx'],
      ['@babel/plugin-transform-runtime']
    ]
  }
}

https://github.com/pugjs/babel-plugin-transform-react-pug/pull/48#issuecomment-406466928
其他相关搜索结果是Is it possible to use Framer Motion in React with pug问题。我尝试了下面的解决方案：

{
  "presets": ["next/babel"],
  "plugins": [
    "transform-react-pug",
    [
      "transform-jsx-classname-components"
    ],
    "transform-react-jsx"
  ]
}

很有趣，但有时候是在工作中，有时候-不。我尝试了两个项目。首先，它在两个项目中都可以工作，但随后出现错误：

ReferenceError: React is not defined
at HomePage (C:\Users\****\Build\InteractiveImplementation\server\pages\index.js:63:3)
    at processChild (C:\Users\****\node_modules\react-dom\cjs\react-dom-server.node.development.js:3353:14)
    at resolve (C:\Users\****\node_modules\react-dom\cjs\react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (C:\Users\****\node_modules\react-dom\cjs\react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (C:\Users\****\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29)
    at renderToString (C:\Users\****\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27)
    at Object.renderPage (C:\Users\****\node_modules\next\dist\next-server\server\render.js:53:854)
    at Function.getInitialProps (C:\Users\****\Build\InteractiveImplementation\server\pages\_document.js:556:19)
    at loadGetInitialProps (C:\Users\****\node_modules\next\dist\next-server\lib\utils.js:5:101)
    at renderToHTML (C:\Users\****\node_modules\next\dist\next-server\server\render.js:53:1145)

这个错误将离开甚至不使用哈巴狗：

import React, { ReactNode } from "react";

class TestComponent extends React.Component<TestComponent.Properties,TestComponent.State> {

  public state: TestComponent.State = {
    count: 0
  }

  public render(): ReactNode {
    // return pug`
    //   main
    //     div ${this.props.message}
    //     div props.message
    // `;
    return (
      <div onClick={() => this.increment(1)}>
        {this.props.message} {this.state.count}
      </div>
    )
  }

  private increment(amt: number): void {
    this.setState((state: TestComponent.State): TestComponent.State => ({
      count: state.count + amt,
    }));
  };
}

namespace TestComponent {

  export type Properties = {
    message: string;
  }

  export type State = {
    count: number;
  };
}

export default TestComponent;

你可能想知道我在应用程序崩溃之前做了什么。好吧，我没有记录我的每一个动作，但我没有做一些大的变化，如目录重命名或配置编辑直接在第一次失败的发射。无论如何，我们需要知道配置是错误的，以及如何修复它。