Vercel 导致 500：内部服务器错误（在本地主机上运行）
Sim*_*ots 5 reactjs next.js vercel
我正在创建一个页面，可以在其中概述我的所有笔记/摘要。
\n笔记的页面是转换为动态文件中使用的 HTML 的 Markdown 文件。
\n\'/note\' 页面是包含一组所有笔记的一页。现在我想实现一个搜索功能来对笔记进行排序。
当我运行npm run dev它时，它会启动本地主机并且一切正常（搜索栏也是如此）。\n但是当我推送到我的 Github 存储库并在 Vercel 上部署时，它会给出 500：内部服务器错误。
在 Vercel 日志中，您可以看到 /note 是服务器端页面，因为它具有“\xce\xbb”符号。
\n\n\n18:40:46.860 \xce\xbb /注释 12.2 kB 104 kB
\n
是router.push("/notes")这个原因造成的还是其他原因？
源代码：https://github.com/Wilmox/portfolio
\nVercel 托管页面：https://portfolio-p3hy5j90k-wilmox.vercel.app/
这也是问题实际发生的 gif：
我希望有一个人可以帮助我 ：）
\n我的notes/index.js 的代码：
\nimport Head from \'next/head\';\nimport Link from \'next/link\';\nimport styles from \'../../styles/Home.module.css\';\nimport Footer from \'../../components/Footer.js\';\nimport Navigation from \'../../components/Navigation\';\nimport { Rating } from \'@material-ui/core\';\nimport Chip from \'../../components/Chip.js\';\n\nimport noteStyle from \'../../styles/Notes.module.css\';\n\nimport { getAllNotes } from \'../../lib/data\';\nimport Search from \'../../components/Search\';\n\nexport default function Notes({ notes }) {\n return (\n <div id="top" className={styles.container}>\n <Head>\n </Head>\n\n <main className={styles.main}>\n <section>\n <Navigation />\n </section>\n <section className={noteStyle.noteSection}>\n <header>\n <h1>Notes & Summaries</h1>\n <p>These are notes I've taken or summaries I've made of the things I read or listen to. Parts may come straight from the source, while others are written by me. <br />\n I do this to get the author's high-level idea or to brush up on something for later, or for people who don't feel like reading / listening to a whole book.</p>\n </header>\n \n <Search />\n\n <div className={noteStyle.notes}>\n {notes.map((note) => (\n <Link key={note.slug} href={`/note/${note.slug}`}>\n <a key={note.slug} className={noteStyle.noteCard}>\n <h2 key="title">{note.title}</h2>\n <h3 key="author">{note.author}</h3>\n <p key="abstract">\n {note.abstract}\n </p>\n <div className={noteStyle.aboutNote}>\n <Rating key="rating" className={noteStyle.rating} name="half-rating-read" defaultValue={note.rating} precision={0.5} readOnly />\n <Chip key="label" className={noteStyle.noteChip} bgColor={note.labelColors[0]} text={note.labelText[0]} icon={note.labelIcons[0]} />\n </div>\n </a>\n </Link>\n ))}\n\n </div>\n </section>\n </main>\n <Footer />\n </div>\n )\n}\n\nexport async function getServerSideProps(context) {\n const allNotes = getAllNotes();\n\n const searchTerm = context.query.search ?? "";\n\n let searchNotes = allNotes;\n\n if (searchTerm != null) {\n searchNotes = searchNotes.filter((note) => {\n //Searches in title, author & abstract data field for a match with the query\n return note.data.title.toLowerCase().includes(searchTerm.toLowerCase()) || note.data.author.toLowerCase().includes(searchTerm.toLowerCase()) || note.data.abstract.toLowerCase().includes(searchTerm.toLowerCase())\n });\n }\n\n \n \n return {\n props: {\n //Here data serialising (dates, urls, ...),\n notes: searchNotes.map(({ data, content, slug }) => ({\n ...data,\n content,\n slug,\n })),\n\n },\n };\n};\nSearch.js 组件的代码
\nimport style from \'./Search.module.css\';\nimport SearchIcon from \'@mui/icons-material/Search\';\nimport { useState, useEffect } from \'react\';\nimport { useRouter } from \'next/router\'\n\nexport default function Search() {\n const [input, setInput] = useState(\'\');\n const router = useRouter();\n\n useEffect(() => {\n if (input != \'\') {\n router.push(\'/notes?search=\' + input);\n console.log("You searched for ", input);\n } else {\n router.push(\'/notes\');\n }\n }, [input]);\n\n const search = (e) => {\n e.preventDefault();\n setInput(e.target.value);\n }\n\n return (\n <div className={style.search}>\n <SearchIcon className={style.search__inputIcon}/>\n <input type="text" placeholder="Search for a note..." value={input} onChange={search} />\n </div>\n )\n}\nVercel 构建日志：
\n18:40:23.357 Cloning github.com/Wilmox/portfolio (Branch: main, Commit: afef201)\n18:40:23.965 Cloning completed: 607.51ms\n18:40:23.981 Analyzing source code...\n18:40:25.095 Installing build runtime...\n18:40:26.928 Build runtime installed: 1.833s\n18:40:29.439 Looking up build cache...\n18:40:29.580 Build cache found. Downloading...\n18:40:32.275 Build cache downloaded [37.34 MB]: 2694.570ms\n18:40:33.436 Installing dependencies...\n18:40:33.440 Detected `package-lock.json` generated by npm 7...\n18:40:34.913 up to date in 1s\n18:40:34.913 156 packages are looking for funding\n18:40:34.913 run `npm fund` for details\n18:40:34.922 Detected Next.js version: 11.1.0\n18:40:34.927 Running "npm run build"\n18:40:35.193 > portfolio@1.0.0 build\n18:40:35.193 > next build\n18:40:35.905 info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5\n18:40:36.056 info - Checking validity of types...\n18:40:37.907 ./pages/index.js\n18:40:37.907 28:9 Warning: Custom fonts not added at the document level will only load for a single page. This is discouraged. See https://nextjs.org/docs/messages/no-page-custom-font. @next/next/no-page-custom-font\n18:40:37.908 72:15 Warning: Image elements must have an alt prop, either with meaningful text, or an empty string for decorative images. jsx-a11y/alt-text\n18:40:37.908 85:15 Warning: Image elements must have an alt prop, either with meaningful text, or an empty string for decorative images. jsx-a11y/alt-text\n18:40:37.908 ./pages/note/[slug].js\n18:40:37.908 26:9 Warning: Custom fonts not added at the document level will only load for a single page. This is discouraged. See https://nextjs.org/docs/messages/no-page-custom-font. @next/next/no-page-custom-font\n18:40:37.908 ./pages/notes/index.js\n18:40:37.909 24:9 Warning: Custom fonts not added at the document level will only load for a single page. This is discouraged. See https://nextjs.org/docs/messages/no-page-custom-font. @next/next/no-page-custom-font\n18:40:37.909 ./pages/projects/index.js\n18:40:37.909 19:9 Warning: Custom fonts not added at the document level will only load for a single page. This is discouraged. See https://nextjs.org/docs/messages/no-page-custom-font. @next/next/no-page-custom-font\n18:40:37.910 32:15 Warning: Image elements must have an alt prop, either with meaningful text, or an empty string for decorative images. jsx-a11y/alt-text\n18:40:37.910 45:15 Warning: Image elements must have an alt prop, either with meaningful text, or an empty string for decorative images. jsx-a11y/alt-text\n18:40:37.910 58:15 Warning: Image elements must have an alt prop, either with meaningful text, or an empty string for decorative images. jsx-a11y/alt-text\n18:40:37.910 71:15 Warning: Image elements must have an alt prop, either with meaningful text, or an empty string for decorative images. jsx-a11y/alt-text\n18:40:37.910 ./components/Search.js\n18:40:37.910 17:10 Warning: React Hook useEffect has a missing dependency: \'router\'. Either include it or remove the dependency array. react-hooks/exhaustive-deps\n18:40:37.911 info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules\n18:40:37.911 info - Creating an optimized production build...\n18:40:44.074 info - Compiled successfully\n18:40:44.076 info - Collecting page data...\n18:40:45.109 info - Generating static pages (0/8)\n18:40:45.558 info - Generating static pages (2/8)\n18:40:46.768 info - Generating static pages (4/8)\n18:40:46.784 info - Generating static pages (6/8)\n18:40:46.830 info - Generating static pages (8/8)\n18:40:46.832 info - Finalizing page optimization...\n18:40:46.859 Page Size First Load JS\n18:40:46.859 \xe2\x94\x8c \xe2\x97\x8b / 3.62 kB 99.1 kB\n18:40:46.859 \xe2\x94\x9c \xe2\x94\x94 css/72e3b52ac8c0e0986525.css 2.5 kB\n18:40:46.859 \xe2\x94\x9c /_app 0 B 67.4 kB\n18:40:46.859 \xe2\x94\x9c \xe2\x97\x8b /404 194 B 67.6 kB\n18:40:46.859 \xe2\x94\x9c \xce\xbb /api/hello 0 B 67.4 kB\n18:40:46.860 \xe2\x94\x9c \xe2\x97\x8f /note/[slug] (3945 ms) 2.97 kB 95.1 kB\n18:40:46.860 \xe2\x94\x9c \xe2\x94\x94 css/0825cd3181548be7acd8.css 2.6 kB\n18:40:46.860 \xe2\x94\x9c \xe2\x94\x9c /note/a-brief-history-of-time (1423 ms)\n18:40:46.860 \xe2\x94\x9c \xe2\x94\x9c /note/rich-dad-poor-dad (1232 ms)\n18:40:46.860 \xe2\x94\x9c \xe2\x94\x9c /note/how-to-win-friends-and-influence-people (1044 ms)\n18:40:46.860 \xe2\x94\x9c \xe2\x94\x94 /note/the-magic-of-thinking-big\n18:40:46.860 \xe2\x94\x9c \xce\xbb /notes 12.2 kB 104 kB\n18:40:46.860 \xe2\x94\x9c \xe2\x94\x94 css/48d66f471e6a5bb11874.css 2.13 kB\n18:40:46.860 \xe2\x94\x94 \xe2\x97\x8b /projects 1.35 kB 93.7 kB\n18:40:46.860 \xe2\x94\x94 css/bf38675255d10289bb03.css 1.39 kB\n18:40:46.860 + First Load JS shared by all 67.4 kB\n18:40:46.860 \xe2\x94\x9c chunks/framework.2191d1.js 42.4 kB\n18:40:46.860 \xe2\x94\x9c chunks/main.9399b7.js 23.6 kB\n18:40:46.860 \xe2\x94\x9c chunks/pages/_app.4003d7.js 586 B\n18:40:46.860 \xe2\x94\x9c chunks/webpack.ddd010.js 822 B\n18:40:46.860 \xe2\x94\x94 css/9b9279095ab98c9a275c.css 752 B\n18:40:46.862 \xce\xbb (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)\n18:40:46.862 \xe2\x97\x8b (Static) automatically rendered as static HTML (uses no initial props)\n18:40:46.862 \xe2\x97\x8f (SSG) automatically generated as static HTML + JSON (uses getStaticProps)\n18:40:46.862 (ISR) incremental static regeneration (uses revalidate in getStaticProps)\n18:40:46.862 Next.js Analytics is enabled for this production build. You\'ll receive a Real Experience Score computed by all of your visitors.\n18:40:48.949 Traced Next.js server files in: 1.983s\n18:40:59.634 Created all serverless functions in: 10.686s\n18:41:00.140 Uploading build outputs...\n18:41:01.138 Deploying build outputs...\n18:41:06.098 Build completed. Populating build cache...\n18:41:29.887 Uploading build cache [37.28 MB]...\n18:41:30.595 Build cache uploaded: 708.32ms\n18:41:31.120 Done with "package.json"\n\n经过 1 年零 9 个月的时间，我成功解决了这个问题。
显然，这是 NextJS 11 中的一个已知漏洞。该漏洞的完整描述可以在CVE-2021-43803中找到
因此，要解决此问题，您只需升级到NextJS 12.1.0或更高版本即可。
我感谢大家在试图提出解决方案时提供的帮助。
| 归档时间： |
|
| 查看次数： |
8394 次 |
| 最近记录： |