我设置了一个简单的 Next.js，其中有一个导航栏，我将其添加到主layout.js 中。 如果我在本地环境中的路线之间导航，它不会重新呈现菜单。事实上，根本没有任何东西被重新渲染。初始页面加载后没有网络请求。
当我部署到生产环境并使用菜单在路由之间导航时，它不仅会在每次单击时重新呈现菜单，而且每次导航时都会一遍又一遍地执行所有网络请求。我通过更改 chrome 开发工具中菜单按钮的颜色来测试这一点，在我的本地环境中，它们在不生产时将保持更改。
我开始使用 React 的原因主要是因为我不必每次导航时都重新渲染整个页面，而只需重新渲染因用户操作而发生变化的部分。
这是我当前的设置：
我正在使用 netlify（不确定我是否缺少可以解决我的问题的特定生产服务器设置）。我附上了 netlify toml 以及下一个配置文件。
应用程序/layout.js
import './globals.css'
import { Inter } from 'next/font/google'
import { ReduxProvider } from '@/store/provider';
import AccountButtons from './AccountButtons';
const inter = Inter({ subsets: ['latin'] })
export const metadata = {
title: 'The Memory Collective',
description: 'Generated by create next app',
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>
<ReduxProvider>
<AccountButtons />
{children}
</ReduxProvider>
</body>
</html>
)
}
AccountButtons.js
import Button from "@mui/material/Button";
import Link from 'next/link'
export default function AccountButtons() {
return (
<>
<div>
<Button variant="contained" size="large"><Link href="/dashboard">My Account</Link></Button>
</div>
<div>
<Link href="/login"><Button variant="text" size="large">Login</Button></Link>
<Link href="/register"><Button variant="contained" size="large">Get Started</Button></Link>
</div>
</>
)
}
注册/page.js
import Link from 'next/link'
export default function Register() {
return (
<>
<h1>Registration Page</h1>
</>
)
}
登录/page.js
import Link from 'next/link'
export default function Login() {
return (
<>
<h1>Login Page</h1>
</>
)
}
应用程序/page.js
import { API } from "../utils/api";
import Image from 'next/image'
import styles from './page.module.css'
import { Fragment } from 'react';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import Link from 'next/link'
export default async function Home() {
const data = await getData()
const set1 = data.textblockset.find(item => item.id === 1);
return (
<main className={styles.main}>
{
set1.textblock.map((item, index) => (
<Fragment key={ item.id }>
{ item.block_icon && (
<Image
src={ item.block_icon }
alt="icon"
width={ 50 }
height={ 50 }
loading="lazy" />
) }
<Typography paragraph fontWeight="bold">
{ item.block_title }
</Typography>
<Typography>
{ item.block_content }
</Typography>
</Fragment>
))
}
</main>
)
}
async function getData() {
const res = await fetch(API.homepage.retrieve(1))
if (!res.ok) {
throw new Error('Failed to fetch data')
}
return res.json()
}
netlify.toml
[build]
command = "npm run build"
publish = ".next"
[[plugins]]
package = "@netlify/plugin-nextjs"
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
remotePatterns: [
{
protocol: 'http',
hostname: 'localhost',
port: '8000',
pathname: '/media/**',
},
],
},
};
module.exports = nextConfig
显然是一个尚未修复的众所周知的 Netlify 问题： https://github.com/netlify/next-runtime/issues/2089