Nextjs 页面刷新总是把我带到 index.js
Posted
技术标签:
【中文标题】Nextjs 页面刷新总是把我带到 index.js【英文标题】：Nextjs page refresh always bring me to index.js 【发布时间】：2021-08-08 12:05:11 【问题描述】：我不明白为什么当我在 nextjs 应用程序中刷新页面时，我总是回到索引页面。 我在 index.js 中有一个带有目录页面的电子商务 SPA，并且产品通过动态 [name].js 页面显示。如果我通过浏览器刷新或后退按钮导航，则路由是一团糟。我想我错过了 nextjs 的良好实践中的一些东西。
index.js
import Head from "next/head";
import Catalogue from "../../components/Catalogue";
import getProducts from "../../utils/api";
const HomePage = ( products ) =>
return (
<div>
<Head>
<title>Catalogue</title>
<meta
name="description"
content="Classe moyenne éditions publie des livres et multiples d'artistes, émergeants ou reconnus, en France et à l'international."
/>
<meta
name="keywords"
content="Edition d'artiste, Livres, prints, multiples, art books, librairie, concept store, Bookshop, Bookstore"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</Head>
<Catalogue products=products />
</div>
);
;
export async function getStaticProps()
const products = await getProducts();
return props: products ;
export default HomePage;
[名称].js
const ProductPage = ( product ) =>
const router = useRouter();
if (router.isFallback)
return <div>Loading products...</div>;
return (
<div className="wrapper">
<Head>
<title>
product.name product.author
</title>
</Head>
<div className="col right" key=product.id>
<div className="colophon" key=product.id>
<p>
product.annee
<br />
Format : product.size <br />
product.pages pages
<br />
product.cover <br />
Printing : product.printing
<br />
Paper : product.paper
<br />
product.copies exemplaires
<br />
product.price € + Shipping
<br />
<br />
</p>
<div className="colophon">
<p style=
width: '50%',
textAlign: 'end',
color: '#6223f5' >
The website is under maintenance. To order a book, please send us an email at <a href="mailto:hello@cmeditions.fr" style= textDecoration: 'underline' >Hello</a>
</p>
product.status === true ? (
<button
className="snipcart-add-item buy-button "
variant="dark"
onMouseEnter=(e) => handleEnter(e)
onMouseOut=(e) => handleExit(e)
data-item-id=product.id
data-item-price=product.price
data-item-url=router.asPath
data-item-image=getStrapiMedia(product.grid_pic.url)
data-item-name=product.name
data-item-description=product.author
v-bind="customFields"
>
BUY ME!
</button>
) : (
<div className="text-center mr-10 mb-1">
<div
className="p-2 bg-indigo-800 items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex"
role="alert"
>
<span className="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">
Coming soon...
</span>
<span className="font-semibold mr-2 text-left flex-auto">
This article is not available yet.
</span>
</div>
</div>
)
</div>
</div>
</div>
</div >
);
;
export default ProductPage;
export async function getStaticProps( params )
const product = await getProduct(params.name);
return props: product ;
// This function gets called at build time
export async function getStaticPaths()
// Call an external API endpoint to get products
const products = await getProducts();
// Get the paths we want to pre-render based on posts
const paths = products.map(
(product) => `/books/$product.name`
);
// We'll pre-render only these paths at build time.
// fallback: false means other routes should 404.
return paths, fallback: false ;
我在 nextjs 文档上读到了这个，它可以成为解决方案的一部分吗？..
如果页面使用可选的包罗万象的路由，则提供 null、[]、 undefined 或 false 以呈现最根路由。例如，如果您 供应 slug: false for pages/[[...slug]], Next.js 将静态 生成页面/。
【问题讨论】：
如果有人能解释一下为什么本地刷新只是刷新我的页面，而在生产中它会引导我到 / 路线？ 我发现与strapi电子商务启动器的唯一区别是后备：false（在启动器中为true）。会不会是从那里来的？ 我也注意到了完全相同的问题。我正在使用 firebase 进行生产。 @Rom-888，你找到解决方案了吗？ 我也使用 firebase。我在另一个应用程序中再次遇到同样的问题... 我尝试在 Vercel 上部署，问题解决了。但实际上，我不知道 firebase 出了什么问题...... 【参考方案1】：getStaticPaths上paths的格式不对。
这是文档。 https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation
export async function getStaticPaths()
// Call an external API endpoint to get products
const products = await getProducts();
// Get the paths we want to pre-render based on posts
const paths = products.map(
(product) => ( params: name: product.name )
);
// We'll pre-render only these paths at build time.
// fallback: false means other routes should 404.
return paths, fallback: false ;
更新
我已经在本地和CSB 上尝试了您的代码，它似乎按预期工作。
你说它只发生在生产环境中，你在哪里部署它？ 部署过程中可能存在问题，因此您可能需要联系您的服务提供商。
另外，我想知道您将 pages 目录放在哪里。 nextjs 要求 pages 目录位于根目录或src 目录中。
https://nextjs.org/docs/advanced-features/src-directory
【讨论】：
谢谢。但是我在生产上仍然遇到同样的问题。如果我在产品页面点击刷新，浏览器上的url还是/books/[name]，但是在屏幕上，我又回到了index 嗯...这很奇怪。您是否一直在构建自定义服务器或使用下一个服务器？该行为是否仅在生产中发生？I read this on the nextjs doc, could it be part of the solution? 这可能不适合你，因为 [name].js 不是包罗万象的路线。
我正在使用下一个服务器，是的，它只发生在生产环境中。你适合包罗万象。我已经考虑构建一个自定义服务器，但想确保它是最好的解决方案。
但是按照nextjs的说法，“大多数时候，你不需要自定义服务器”，我的项目并没有那么特别。我不明白我做错了什么..
部署在firebase上，pages目录在根目录以上是关于Nextjs 页面刷新总是把我带到 index.js的主要内容，如果未能解决你的问题，请参考以下文章