如何解决 Next.Js 中的内部服务器错误？

Question

我刚刚使用创建了下一个应用程序npx create-next-app。然后我安装了 sass yarn add sass。我没有做任何其他事情，只是输入yarn dev......然后繁荣。我的终端和浏览器（本地主机）中显示大量错误

内部服务器错误

我的终端现在看起来像这样

PS D:\Web development\Booksbia Website\Booksbia-next\booksbia> npm run dev

> booksbia@0.1.0 dev D:\Web development\Booksbia Website\Booksbia-next\booksbia
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn  - D:/Web Development/BooksBia Website/Booksbia-next/booksbia/node_modules/@babel/runtime/helpers/interopRequireDefault.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@babel\runtime\helpers\interopRequireDefault.js
    Used by 4 module(s), i. e.
    D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\client\router.js 
* D:\Web development\Booksbia Website\Booksbia-next\booksbia\node_modules\@babel\runtime\helpers\interopRequireDefault.js
    Used by 10 module(s), i. e.
    D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web development\Booksbia Website\Booksbia-next\booksbia\node_modules\next\dist\client\next-dev.js

D:/Web Development/BooksBia Website/Booksbia-next/booksbia/node_modules/@babel/runtime/helpers/interopRequireWildcard.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@babel\runtime\helpers\interopRequireWildcard.js
    Used by 1 module(s), i. e.
    D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\client\router.js 
* D:\Web development\Booksbia Website\Booksbia-next\booksbia\node_modules\@babel\runtime\helpers\interopRequireWildcard.js
    Used by 6 module(s), i. e.
    D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web development\Booksbia Website\Booksbia-next\booksbia\node_modules\next\dist\client\next-dev.js

D:/Web Development/BooksBia Website/Booksbia-next/booksbia/node_modules/@babel/runtime/helpers/typeof.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@babel\runtime\helpers\typeof.js
    Used by 2 module(s), i. e.
    D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@babel\runtime\helpers\possibleConstructorReturn.js
* D:\Web development\Booksbia Website\Booksbia-next\booksbia\node_modules\@babel\runtime\helpers\typeof.js
    Used by 1 module(s), i. e.
    D:\Web development\Booksbia Website\Booksbia-next\booksbia\node_modules\@babel\runtime\helpers\interopRequireWildcard.js

D:/Web Development/BooksBia Website/Booksbia-next/booksbia/node_modules/next/dist/client/normalize-trailing-slash.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\client\normalize-trailing-slash.js
    Used by 1 module(s), i. e.
    D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\next-server\lib\router\router.js
* D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web development\Booksbia Website\Booksbia-next\booksbia\node_modules\next\dist\client\normalize-trailing-slash.js
    Used by 2 module(s), i. e.
    D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web development\Booksbia Website\Booksbia-next\booksbia\node_modules\next\dist\next-server\lib\router\router.js

D:/Web Development/BooksBia Website/Booksbia-next/booksbia/node_modules/next/dist/client/request-idle-callback.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\client\request-idle-callback.js
    Used by 1 module(s), i. e.
    D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\client\route-loader.js
* D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web development\Booksbia Website\Booksbia-next\booksbia\node_modules\next\dist\client\request-idle-callback.js
    Used by 1 module(s), i. e.
    D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web development\Booksbia Website\Booksbia-next\booksbia\node_modules\next\dist\client\route-loader.js

D:/Web Development/BooksBia Website/Booksbia-next/booksbia/node_modules/next/dist/client/route-loader.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\client\route-loader.js
    Used by 1 module(s), i. e.
    D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\next-server\lib\router\router.js
* D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web development\Booksbia Website\Booksbia-next\booksbia\node_modules\next\dist\client\route-loader.js
    Used by 2 module(s), i. e.
    D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web development\Booksbia Website\Booksbia-next\booksbia\node_modules\next\dist\next-server\lib\router\router.js

D:/Web Development/BooksBia Website/Booksbia-next/booksbia/node_modules/next/dist/client/router.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\client\router.js   
    Used by 3 module(s), i. e.
    multi next-client-pages-loader?page=%2F_app&absolutePagePath=private-next-pages%2F_app.js! D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\client\router.js
* D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web development\Booksbia Website\Booksbia-next\booksbia\node_modules\next\dist\client\router.js   
    Used by 2 module(s), i. e.
    D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web development\Booksbia Website\Booksbia-next\booksbia\node_modules\next\dist\client\index.js  

D:/Web Development/BooksBia Website/Booksbia-next/booksbia/node_modules/next/dist/client/with-router.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\client\with-router.js
    Used by 1 module(s), i. e.
    D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\client\router.js 
* D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web development\Booksbia Website\Booksbia-next\booksbia\node_modules\next\dist\client\with-router.js
    Used by 1 module(s), i. e.
    D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web development\Booksbia Website\Booksbia-next\booksbia\node_modules\next\dist\client\router.js 

D:/Web Development/BooksBia Website/Booksbia-next/booksbia/node_modules/next/dist/next-server/lib/head-manager-context.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\next-server\lib\head-manager-context.js
    Used by 1 module(s), i. e.
    D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\next-server\lib\head.js
* D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web development\Booksbia Website\Booksbia-next\booksbia\node_modules\next\dist\next-server\lib\head-manager-context.js
    Used by 1 module(s), i. e.
    D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web development\Booksbia Website\Booksbia-next\booksbia\node_modules\next\dist\client\index.js  

D:/Web Development/BooksBia Website/Booksbia-next/booksbia/node_modules/next/dist/next-server/lib/i18n/normalize-locale-path.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\next-server\lib\i18n\normalize-locale-path.js
    Used by 1 module(s), i. e.
    D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\next-server\lib\router\router.js
* D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web development\Booksbia Website\Booksbia-next\booksbia\node_modules\next\dist\next-server\lib\i18n\normalize-locale-path.js
    Used by 2 module(s), i. e.
    D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web development\Booksbia Website\Booksbia-next\booksbia\node_modules\next\dist\next-server\lib\router\router.js

D:/Web Development/BooksBia Website/Booksbia-next/booksbia/node_modules/next/dist/next-server/lib/mitt.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\next-server\lib\mitt.js
    Used by 1 module(s), i. e.
    D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\next-server\lib\router\router.js
* D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web development\Booksbia Website\Booksbia-next\booksbia\node_modules\next\dist\next-server\lib\mitt.js
    Used by 2 module(s), i. e.
    D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web development\Booksbia Website\Booksbia-next\booksbia\node_modules\next\dist\client\index.js  

D:/Web Development/BooksBia Website/Booksbia-next/booksbia/node_modules/next/dist/next-server/lib/router-context.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\next-server\lib\router-context.js
    Used by 1 module(s), i. e.
    D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\client\router.js 
* D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!D:\Web development\Booksbia Website\Booksbia-next\booksbia\node_modules\next\dist\next-server\lib\router-context.js
    Used by 2 module(s), i. e.
    D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\@next\react-refresh-utils\loader.js!D:\Web Development\BooksBia Website\Booksbia-next\booksbia\node_modules\next\dist\build

    

Answer 1

该错误与 Next.js 本身无关，它看起来与您在终端中使用的路径和文件系统中的实际路径不匹配。

在您的终端中：

D:\Web development\Booksbia Website\Booksbia-next\booksbia
       ^

实际路径：

D:\Web Development\BooksBia Website\Booksbia-next\booksbia
       ^

确保终端中的路径与实际路径中的大小写匹配。