我正在创建一个页面，可以在其中概述我的所有笔记/摘要。
笔记的页面是转换为动态文件中使用的 HTML 的 Markdown 文件。
“/note”页面是一页，包含一组所有笔记。现在我想实现一个搜索功能来对笔记进行排序。
当我跑步时npm run dev它启动本地主机并且一切正常（还有搜索栏）。
但是，当我推送到我的 Github 存储库并在 Vercel 上部署时，它会给出 500：内部服务器错误。
在 Vercel 日志中，您可以看到 /note 是服务器端页面，因为它具有“λ”符号。
18:40:46.860 λ /注释 12.2 kB 104 kB
是不是router.push("/notes")这是造成这个还是其他什么原因？
源代码：https://github.com/Wilmox/portfolio https://github.com/Wilmox/portfolio
Vercel 托管页面：https://portfolio-p3hy5j90k-wilmox.vercel.app/ https://portfolio-p3hy5j90k-wilmox.vercel.app/
Here is also a gif of the problem in action: 
我希望有一个人可以帮助我 ：）
我的notes/index.js 的代码：
import Head from 'next/head';
import Link from 'next/link';
import styles from '../../styles/Home.module.css';
import Footer from '../../components/Footer.js';
import Navigation from '../../components/Navigation';
import { Rating } from '@material-ui/core';
import Chip from '../../components/Chip.js';
import noteStyle from '../../styles/Notes.module.css';
import { getAllNotes } from '../../lib/data';
import Search from '../../components/Search';
export default function Notes({ notes }) {
return (
<div id="top" className={styles.container}>
<Head>
</Head>
<main className={styles.main}>
<section>
<Navigation />
</section>
<section className={noteStyle.noteSection}>
<header>
<h1>Notes & Summaries</h1>
<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 />
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>
</header>
<Search />
<div className={noteStyle.notes}>
{notes.map((note) => (
<Link key={note.slug} href={`/note/${note.slug}`}>
<a key={note.slug} className={noteStyle.noteCard}>
<h2 key="title">{note.title}</h2>
<h3 key="author">{note.author}</h3>
<p key="abstract">
{note.abstract}
</p>
<div className={noteStyle.aboutNote}>
<Rating key="rating" className={noteStyle.rating} name="half-rating-read" defaultValue={note.rating} precision={0.5} readOnly />
<Chip key="label" className={noteStyle.noteChip} bgColor={note.labelColors[0]} text={note.labelText[0]} icon={note.labelIcons[0]} />
</div>
</a>
</Link>
))}
</div>
</section>
</main>
<Footer />
</div>
)
}
export async function getServerSideProps(context) {
const allNotes = getAllNotes();
const searchTerm = context.query.search ?? "";
let searchNotes = allNotes;
if (searchTerm != null) {
searchNotes = searchNotes.filter((note) => {
//Searches in title, author & abstract data field for a match with the query
return note.data.title.toLowerCase().includes(searchTerm.toLowerCase()) || note.data.author.toLowerCase().includes(searchTerm.toLowerCase()) || note.data.abstract.toLowerCase().includes(searchTerm.toLowerCase())
});
}
return {
props: {
//Here data serialising (dates, urls, ...),
notes: searchNotes.map(({ data, content, slug }) => ({
...data,
content,
slug,
})),
},
};
};
Search.js 组件的代码
import style from './Search.module.css';
import SearchIcon from '@mui/icons-material/Search';
import { useState, useEffect } from 'react';
import { useRouter } from 'next/router'
export default function Search() {
const [input, setInput] = useState('');
const router = useRouter();
useEffect(() => {
if (input != '') {
router.push('/notes?search=' + input);
console.log("You searched for ", input);
} else {
router.push('/notes');
}
}, [input]);
const search = (e) => {
e.preventDefault();
setInput(e.target.value);
}
return (
<div className={style.search}>
<SearchIcon className={style.search__inputIcon}/>
<input type="text" placeholder="Search for a note..." value={input} onChange={search} />
</div>
)
}
Vercel 构建日志：
18:40:23.357 Cloning github.com/Wilmox/portfolio (Branch: main, Commit: afef201)
18:40:23.965 Cloning completed: 607.51ms
18:40:23.981 Analyzing source code...
18:40:25.095 Installing build runtime...
18:40:26.928 Build runtime installed: 1.833s
18:40:29.439 Looking up build cache...
18:40:29.580 Build cache found. Downloading...
18:40:32.275 Build cache downloaded [37.34 MB]: 2694.570ms
18:40:33.436 Installing dependencies...
18:40:33.440 Detected `package-lock.json` generated by npm 7...
18:40:34.913 up to date in 1s
18:40:34.913 156 packages are looking for funding
18:40:34.913 run `npm fund` for details
18:40:34.922 Detected Next.js version: 11.1.0
18:40:34.927 Running "npm run build"
18:40:35.193 > [email protected] /cdn-cgi/l/email-protection build
18:40:35.193 > next build
18:40:35.905 info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
18:40:36.056 info - Checking validity of types...
18:40:37.907 ./pages/index.js
18: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
18: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
18: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
18:40:37.908 ./pages/note/[slug].js
18: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
18:40:37.908 ./pages/notes/index.js
18: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
18:40:37.909 ./pages/projects/index.js
18: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
18: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
18: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
18: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
18: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
18:40:37.910 ./components/Search.js
18: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
18:40:37.911 info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
18:40:37.911 info - Creating an optimized production build...
18:40:44.074 info - Compiled successfully
18:40:44.076 info - Collecting page data...
18:40:45.109 info - Generating static pages (0/8)
18:40:45.558 info - Generating static pages (2/8)
18:40:46.768 info - Generating static pages (4/8)
18:40:46.784 info - Generating static pages (6/8)
18:40:46.830 info - Generating static pages (8/8)
18:40:46.832 info - Finalizing page optimization...
18:40:46.859 Page Size First Load JS
18:40:46.859 ┌ ○ / 3.62 kB 99.1 kB
18:40:46.859 ├ └ css/72e3b52ac8c0e0986525.css 2.5 kB
18:40:46.859 ├ /_app 0 B 67.4 kB
18:40:46.859 ├ ○ /404 194 B 67.6 kB
18:40:46.859 ├ λ /api/hello 0 B 67.4 kB
18:40:46.860 ├ ● /note/[slug] (3945 ms) 2.97 kB 95.1 kB
18:40:46.860 ├ └ css/0825cd3181548be7acd8.css 2.6 kB
18:40:46.860 ├ ├ /note/a-brief-history-of-time (1423 ms)
18:40:46.860 ├ ├ /note/rich-dad-poor-dad (1232 ms)
18:40:46.860 ├ ├ /note/how-to-win-friends-and-influence-people (1044 ms)
18:40:46.860 ├ └ /note/the-magic-of-thinking-big
18:40:46.860 ├ λ /notes 12.2 kB 104 kB
18:40:46.860 ├ └ css/48d66f471e6a5bb11874.css 2.13 kB
18:40:46.860 └ ○ /projects 1.35 kB 93.7 kB
18:40:46.860 └ css/bf38675255d10289bb03.css 1.39 kB
18:40:46.860 + First Load JS shared by all 67.4 kB
18:40:46.860 ├ chunks/framework.2191d1.js 42.4 kB
18:40:46.860 ├ chunks/main.9399b7.js 23.6 kB
18:40:46.860 ├ chunks/pages/_app.4003d7.js 586 B
18:40:46.860 ├ chunks/webpack.ddd010.js 822 B
18:40:46.860 └ css/9b9279095ab98c9a275c.css 752 B
18:40:46.862 λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
18:40:46.862 ○ (Static) automatically rendered as static HTML (uses no initial props)
18:40:46.862 ● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
18:40:46.862 (ISR) incremental static regeneration (uses revalidate in getStaticProps)
18: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.
18:40:48.949 Traced Next.js server files in: 1.983s
18:40:59.634 Created all serverless functions in: 10.686s
18:41:00.140 Uploading build outputs...
18:41:01.138 Deploying build outputs...
18:41:06.098 Build completed. Populating build cache...
18:41:29.887 Uploading build cache [37.28 MB]...
18:41:30.595 Build cache uploaded: 708.32ms
18:41:31.120 Done with "package.json"
经过 1 年零 9 个月的时间，我成功解决了这个问题。
显然，这是一个众所周知的脆弱性在 NextJS 11 中。该漏洞的完整描述可以在CVE-2021-43803 https://nvd.nist.gov/vuln/detail/CVE-2021-43803
因此，要解决此问题，您只需升级到NextJS 12.1.0或以上。
我感谢大家在试图提出解决方案时提供的帮助。