我有一个基于nextjs的ReactJS+Typescript网站,我的操作系统是windows 11。当我执行npm run dev
时,我在终端中得到这样的输出:
PS C:\Users\hosap\Documents\Programming\NextJSApplication\next-typescript> npm run dev
> next-typescript@0.1.0 dev
> next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Loaded env from C:\Users\hosap\Documents\Programming\NextJSApplication\next-typescript\.env
event - compiled client and server successfully in 1315 ms (150 modules)
wait - compiling /_error (client and server)...
event - compiled client and server successfully in 219 ms (151 modules)
warn - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
字符串
消息显示已成功编译的客户端和服务器,但当我访问localhost:3000
时,我的浏览器只显示
x1c 0d1x的数据
正如你在这里看到的,浏览器正在接收来自localhost:3000的404错误
的
项目结构如下所示:
.next/ (creates automatically when I do npm run dev)
.swc/
.vscode/
settings.json
.VSCodeCounter/
node_modules/
public/
images/
logo/
favicon.ico
src/
components/
elements/
functions/
lib/
pages/
styles/
.env
.eslintrc.json
.gitignore
environment.d.ts
jest.config.js
next-env.d.ts
next.config.js
package-lock.json
package.json
README.md
setupTests.js
tsconfig.json
型
/pages文件夹的结构
pages/
api/
search.ts
search/
_app.tsx
_document.tsx
404.tsx
about-us.tsx
index.tsx
型
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js']
}
module.exports = nextConfig
型
package.json
{
"name": "next-typescript",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"test": "jest",
"lint": "next lint"
},
"dependencies": {
"@next/font": "13.1.1",
"@types/node": "^18.11.17",
"@types/react": "18.0.26",
"@types/react-dom": "18.0.10",
"classnames": "^2.3.2",
"eslint-config-next": "13.1.1",
"jest-environment-jsdom": "^29.5.0",
"next": "13.1.1",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"@babel/preset-typescript": "^7.21.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.0.0",
"@types/enzyme": "^3.10.12",
"@types/jest": "^29.5.0",
"@typescript-eslint/eslint-plugin": "^5.48.0",
"eslint": "^8.31.0",
"eslint-config-standard-with-typescript": "^26.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-n": "^15.6.0",
"eslint-plugin-promise": "^6.1.1",
"eslint-plugin-react": "^7.31.11",
"jest": "^29.5.0",
"next-router-mock": "^0.9.7",
"typescript": "^4.9.4"
}
}
型
environment.d.ts
declare global {
namespace NodeJS {
interface ProcessEnv {
NODE_ENV: 'development' | 'production'
API_KEY: string
URL: string
}
}
}
export {}
型
该项目的工作,直到2天前,但现在它不工作,我所有的本地分支机构。我不确定我的最后一次改变是否搞砸了这个项目,但我在工作时没有遇到这样的问题。npm run start
也显示相同的404错误。是什么导致了这个问题?
我尝试的是:
- npm ci
1.重新启动计算机
1.删除environment.d.ts
中的空导出
没有工作:(
2条答案
按热度按时间niwlg2el1#
Next.js 13使用
app
文件夹作为应用程序。您的源中没有此文件夹。这会导致问题吗?当使用(旧版)
pages
文件夹时,标准结构是将此文件夹直接放在项目根文件夹下。uqzxnwby2#
原因是我在
next.config.js
中有错误的pageExtensions
值。删除了属性,它工作正常。pageExtensions
只接受以pages.tsx, pages.ts, pages.jsx, pages.js
结尾的字符串,但我的文件中没有这样的字符串