如何构建和导出下一个带有 getServerSideProps 的 js 应用程序？

Question

我是下一个js的新手，我一直在尝试构建和导出我的下一个js应用程序，其中包含getServerSideProps，但是发生了错误。

这是我的package.json：

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "export": "npm run build && npm run export"
  },

我尝试用

npm run build

,

进行构建

    info  - Checking validity of types
info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
info  - Creating an optimized production build
info  - Compiled successfully
info  - Collecting page data
info  - Generating static pages (8/8)
info  - Finalizing page optimization

Page                                       Size     First Load JS
┌ ○ /                                      4.09 kB         102 kB
├   /_app                                  0 B            97.5 kB
├ λ /[id]                                  4.25 kB         102 kB
├ ○ /404                                   495 B            98 kB
├ λ /about                                 780 B          98.3 kB
├ λ /additional                            798 B          98.3 kB
├ ○ /cart                                  2.82 kB         100 kB
├ λ /contact                               1.38 kB        98.9 kB
├ λ /deliver                               796 B          98.3 kB
├ λ /faq                                   792 B          98.3 kB
├ ○ /history                               2.79 kB         100 kB
├ ○ /login                                 1.9 kB         99.4 kB
├ λ /payment                               789 B          98.3 kB
├ ○ /register                              6.76 kB         104 kB
└ ○ /saved                                 2.05 kB        99.6 kB
+ First Load JS shared by all              97.5 kB
  ├ chunks/framework-5f4595e5518b5600.js   42 kB
  ├ chunks/main-a0853fbc3d9f629b.js        25.6 kB
  ├ chunks/pages/_app-24619101f90696a4.js  28.4 kB
  ├ chunks/webpack-a27b2f7f3b9841c4.js     1.51 kB
  └ css/27d177a30947857b.css               194 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)

在此之后我尝试了

npm run export

，它的作用相同并且没有在

html

中提供任何

out

文件

然后我尝试了

next build

，这是错误：

Error occurred prerendering page "/saved". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at S (C:\Users\User\Desktop\kuba-motors\node_modules\react\cjs\react.production.min.js:18:327)
    at exports.useMemo (C:\Users\User\Desktop\kuba-motors\node_modules\react\cjs\react.production.min.js:23:109)
    at Provider (C:\Users\User\Desktop\kuba-motors\node_modules\react-redux\lib\components\Provider.js:24:41)
    at d (C:\Users\User\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:33:498)
    at bb (C:\Users\User\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:36:16)
    at a.b.render (C:\Users\User\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:42:43)
    at a.b.read (C:\Users\User\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:41:83)
    at Object.exports.renderToString (C:\Users\User\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.node.production.min.js:52:138)
    at Object.renderPage (C:\Users\User\AppData\Roaming\npm\node_modules\next\dist\server\render.js:736:46)
    at Object.defaultGetInitialProps (C:\Users\User\AppData\Roaming\npm\node_modules\next\dist\server\render.js:368:51)

info  - Generating static pages (8/8)

> Build error occurred
Error: Export encountered errors on following paths:
        /
        /404
        /_error: /500
        /cart
        /history
        /login
        /register
        /saved
    at C:\Users\User\AppData\Roaming\npm\node_modules\next\dist\export\index.js:499:19
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Span.traceAsyncFn (C:\Users\User\AppData\Roaming\npm\node_modules\next\dist\trace\trace.js:75:20)
    at async C:\Users\User\AppData\Roaming\npm\node_modules\next\dist\build\index.js:1015:17
    at async Span.traceAsyncFn (C:\Users\User\AppData\Roaming\npm\node_modules\next\dist\trace\trace.js:75:20)
    at async C:\Users\User\AppData\Roaming\npm\node_modules\next\dist\build\index.js:889:13
    at async Span.traceAsyncFn (C:\Users\User\AppData\Roaming\npm\node_modules\next\dist\trace\trace.js:75:20)
    at async Object.build [as default] (C:\Users\User\AppData\Roaming\npm\node_modules\next\dist\build\index.js:82:25)

然后我尝试了

next export

，这是错误：

info  - Exporting (14/14)
Error: Export encountered errors on following paths:
        /
        /404
        /[id]
        /about
        /additional
        /cart
        /contact
        /deliver
        /faq
        /history
        /login
        /payment
        /register
        /saved
    at C:\Users\User\AppData\Roaming\npm\node_modules\next\dist\export\index.js:499:19
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Span.traceAsyncFn (C:\Users\User\AppData\Roaming\npm\node_modules\next\dist\trace\trace.js:75:20)

Answer 1

使用

getServerSideProps

创建静态导出时不能使用

next export

。命令

next export

创建一个独立的静态网站 (SPA)，无需节点服务器作为主干。这意味着您无法在服务器上运行任何内容。您唯一可以与服务器对话的时间是在构建时使用

getStaticProps

。请参阅 https://nextjs.org/docs/pages/building-your-application/deploying/static-exports#unsupported-features 了解更多详细信息。