next.js npm run dev编译服务器和客户端,但浏览器显示404错误

lawou6xi  于 2023-08-04  发布在  其他
关注(0)|答案(2)|浏览(177)

我有一个基于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错误。是什么导致了这个问题?
我尝试的是:

  1. npm ci
    1.重新启动计算机
    1.删除environment.d.ts中的空导出
    没有工作:(
niwlg2el

niwlg2el1#

Next.js 13使用app文件夹作为应用程序。您的源中没有此文件夹。这会导致问题吗?
当使用(旧版)pages文件夹时,标准结构是将此文件夹直接放在项目根文件夹下。

uqzxnwby

uqzxnwby2#

原因是我在next.config.js中有错误的pageExtensions值。删除了属性,它工作正常。pageExtensions只接受以pages.tsx, pages.ts, pages.jsx, pages.js结尾的字符串,但我的文件中没有这样的字符串

相关问题