Javascript Next.js不'；t加载jsx

我一直在搜索当下的javascript框架Next.js，我想开始练习。问题是：它无论如何都不会在我的电脑上运行

创建下一个项目的自然形式是使用命令行：

npx create-next-app

或

结果是一个带有文件结构的模板项目和一些运行服务器的脚本。最基本的脚本以开发模式运行服务器：

npm run dev

或

终端中的结果是警告：

$ yarn dev
yarn run v1.22.5
$ next dev
(node:5348) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution
 of the package at C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\node_modules\postcss\package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
ready - started server on http://localhost:3000
error - C:/Users/maths/Documents/codigos/node/my-app/pages/_app.js 4:9
Module parse failed: Unexpected token (4:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. S
ee https://webpack.js.org/concepts#loaders
|
| function MyApp({ Component, pageProps }) {
>   return <Component {...pageProps} />
| }
|

纱线开发
纱线运行v1.22.5
$next dev
（节点：5348）[DEP0148]弃用警告：使用“导出”字段模块解析中弃用的文件夹映射“/”
位于C:\Users\math\Documents\codigos\node\my app\node\u modules\next\node\u modules\postss\package.json的程序包。
更新this package.json以使用类似“/*”的子路径模式。
（使用`node--trace deprecation…`显示警告的创建位置）
已在上准备好启动服务器http://localhost:3000
错误-C:/Users/math/Documents/codigos/node/my-app/pages/_-app.js 4:9
模块分析失败：意外令牌（4:9）
您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。s
eehttps://webpack.js.org/concepts#loaders
|
|函数MyApp（{Component，pageProps}）{
>返回
| }
|

当我在localhost:3000中进入网站时，浏览器上的页面显示：

内部服务器错误

从浏览器发出http请求后，终端显示以下消息：

event - build page: /next/dist/pages/_error
wait  - compiling...
error - C:/Users/maths/Documents/codigos/node/my-app/pages/_app.js 4:9
Module parse failed: Unexpected token (4:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. S
ee https://webpack.js.org/concepts#loaders
|
| function MyApp({ Component, pageProps }) {
>   return <Component {...pageProps} />
| }
|
Error: Cannot find module 'C:\Users\maths\Meus Documentos\codigos\node\my-app\.next\server\pages-manifest.json'
Require stack:
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\require.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\load-components.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\api-utils.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\next-server.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\server\next.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\server\lib\start-server.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\cli\next-dev.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\bin\next
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:925:15)
    at Function.Module._load (node:internal/modules/cjs/loader:769:27)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at getPagePath (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\require.js:1:
657)
    at requirePage (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\require.js:1:
1062)
    at loadComponents (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\load-compo
nents.js:1:807)
    at DevServer.findPageComponents (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\ser
ver\next-server.js:74:296)
    at DevServer.renderErrorToHTML (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\serv
er\next-server.js:126:120)
    at DevServer.renderErrorToHTML (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\server\next-dev-
server.js:34:974)
    at processTicksAndRejections (node:internal/process/task_queues:93:5)
    at async DevServer.render (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\ne
xt-server.js:72:236)
    at async Object.fn (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\next-serv
er.js:56:618)
    at async Router.execute (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\rout
er.js:23:67)
    at async DevServer.run (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\next-
server.js:66:1042)
    at async DevServer.handleRequest (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\se
rver\next-server.js:34:1081) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\next-server\\server\\require.js',
    'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\next-server\\server\\load-components.
js',
    'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\next-server\\server\\api-utils.js',
    'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\next-server\\server\\next-server.js',
    'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\server\\next.js',
    'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\server\\lib\\start-server.js',
    'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\cli\\next-dev.js',
    'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\bin\\next'
  ]
}

事件-生成页面：/next/dist/pages/\u错误
等待-编译。。。
错误-C:/Users/math/Documents/codigos/node/my-app/pages/_-app.js 4:9
模块分析失败：意外令牌（4:9）
您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。s
eehttps://webpack.js.org/concepts#loaders
|
|函数MyApp（{Component，pageProps}）{
>返回
| }
|
错误：找不到模块“C:\Users\mathematics\Meus Documentos\codigos\node\my app\.next\server\pages manifest.json”
需要堆栈：
-C:\Users\mathematics\Documents\codigos\node\my app\node\u modules\next\dist\next server\server\require.js
-C:\Users\math\Documents\codigos\node\my app\node\u modules\next\dist\next server\server\load-components.js
-C:\Users\maths\Documents\codigos\node\my app\node\u modules\next\dist\next server\server\api-utils.js
-C:\Users\mathematics\Documents\codigos\node\my app\node\u modules\next\dist\next server\server\next-server.js
-C:\Users\math\Documents\codigos\node\my app\node\u modules\next\dist\server\next.js
-C:\Users\math\Documents\codigos\node\my app\node\u modules\next\dist\server\lib\start-server.js
-C:\Users\math\Documents\codigos\node\my app\node\u modules\next\dist\cli\next-dev.js
-C:\Users\mathematics\Documents\codigos\node\my app\node\u modules\next\dist\bin\next
位于Function.Module.\u解析文件名（节点：internal/modules/cjs/loader:925:15）
at功能模块加载（节点：内部/模块/cjs/加载程序：769:27）
at Module.require（节点：内部/模块/cjs/加载器：997:19）
需要时（节点：内部/模块/cjs/helpers:92:18）
在getPagePath（C:\Users\Math\Documents\codigos\node\my app\node\U modules\next\dist\next server\server\require.js:1:
657)
在requirePage（C:\Users\Math\Documents\codigos\node\my app\node\U modules\next\dist\next server\server\require.js:1:
1062)
在loadComponents（C:\Users\Math\Documents\codigos\node\my app\node\U modules\next\dist\next server\server\load compo
新界南：1:807）
在DevServer.findPageComponents（C:\Users\maths\Documents\codigos\node\my app\node\u modules\next\dist\next server\ser
ver\next server.js:74:296）
在DevServer.renderErrorToHTML（C:\Users\math\Documents\codigos\node\my app\node\u modules\next\dist\next server\serv
er\next server.js:126:120）
在DevServer.renderErrorToHTML（C:\Users\math\Documents\codigos\node\my app\node\u modules\next\dist\server\next dev-
server.js:34:974）
在处理和拒绝时（节点：内部/处理/任务队列：93:5）
在async DevServer.render（C:\Users\math\Documents\codigos\node\my app\node\u modules\next\dist\next server\server\ne
xt server.js:72:236）
在async Object.fn（C:\Users\math\Documents\codigos\node\my app\node\u modules\next\dist\next server\server\next serv
er.js:56:618）
在async Router.execute（C:\Users\mathematics\Documents\codigos\node\my app\node\u modules\next\dist\next server\server\rout
呃.js:23:67)
在async DevServer.run（C:\Users\math\Documents\codigos\node\my app\node\u modules\next\dist\next server\server\next-
server.js:66:1042）
在async DevServer.handleRequest（C:\Users\math\Documents\codigos\node\my app\node\u modules\next\dist\next server\se
服务器\next server.js:34:1081）{
代码：“未找到模块”，
requireStack：[
'C:\\Users\\Math\\Documents\\codigos\\node\\my app\\node\U modules\\next\\dist\\next server\\server\\require.js'，
'C:\\Users\\Math\\Documents\\codigos\\node\\my app\\node\U模块\\next\\dist\\next server\\server\\load组件。
js'，
'C:\\Users\\Math\\Documents\\codigos\\node\\my app\\node\U modules\\next\\dist\\next server\\server\\api utils.js'，
'C:\\Users\\Math\\Documents\\codigos\\node\\my app\\node\U modules\\next\\dist\\next server\\server\\next server.js'，
'C:\\Users\\Math\\Documents\\codigos\\node\\my app\\node\U modules\\next\\dist\\server\\next.js'，
'C:\\Users\\Math\\Documents\\codigos\\node\\my app\\node\U modules\\next\\dist\\server\\lib\\start server.js'，
'C:\\Users\\math\\Documents\\codigos\\node\\my app\\node\u modules\\next\\dist\\cli\\next-dev.js'，
'C:\\Users\\math\\Documents\\codigos\\node\\my app\\node\u modules\\next\\dist\\bin\\next'
]
}

我尝试了几种方法来修复它，在没有来自npx和Thread的脚本的情况下创建下一个项目（通过手动安装依赖项），更新node和npm的版本，等等。程序似乎无法加载jsx，第一个错误指向第一个jsx组件出现在代码中的时刻。信息

$ yarn dev
yarn run v1.22.5
$ next dev
(node:5348) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution
 of the package at C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\node_modules\postcss\package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
ready - started server on http://localhost:3000
error - C:/Users/maths/Documents/codigos/node/my-app/pages/_app.js 4:9
Module parse failed: Unexpected token (4:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. S
ee https://webpack.js.org/concepts#loaders
|
| function MyApp({ Component, pageProps }) {
>   return <Component {...pageProps} />
| }
|

event - build page: /next/dist/pages/_error
wait  - compiling...
error - C:/Users/maths/Documents/codigos/node/my-app/pages/_app.js 4:9
Module parse failed: Unexpected token (4:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. S
ee https://webpack.js.org/concepts#loaders
|
| function MyApp({ Component, pageProps }) {
>   return <Component {...pageProps} />
| }
|
Error: Cannot find module 'C:\Users\maths\Meus Documentos\codigos\node\my-app\.next\server\pages-manifest.json'
Require stack:
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\require.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\load-components.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\api-utils.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\next-server.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\server\next.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\server\lib\start-server.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\cli\next-dev.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\bin\next
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:925:15)
    at Function.Module._load (node:internal/modules/cjs/loader:769:27)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at getPagePath (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\require.js:1:
657)
    at requirePage (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\require.js:1:
1062)
    at loadComponents (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\load-compo
nents.js:1:807)
    at DevServer.findPageComponents (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\ser
ver\next-server.js:74:296)
    at DevServer.renderErrorToHTML (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\serv
er\next-server.js:126:120)
    at DevServer.renderErrorToHTML (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\server\next-dev-
server.js:34:974)
    at processTicksAndRejections (node:internal/process/task_queues:93:5)
    at async DevServer.render (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\ne
xt-server.js:72:236)
    at async Object.fn (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\next-serv
er.js:56:618)
    at async Router.execute (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\rout
er.js:23:67)
    at async DevServer.run (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\next-
server.js:66:1042)
    at async DevServer.handleRequest (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\se
rver\next-server.js:34:1081) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\next-server\\server\\require.js',
    'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\next-server\\server\\load-components.
js',
    'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\next-server\\server\\api-utils.js',
    'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\next-server\\server\\next-server.js',
    'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\server\\next.js',
    'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\server\\lib\\start-server.js',
    'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\cli\\next-dev.js',
    'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\bin\\next'
  ]
}