Meta
目录
“next”: “9.4.4”
TLDR: NextJS API needs dynamic server, check Vercel instead of Git Pages
ref: https://github.com/vercel/next.js/issues/9366#issuecomment-552212621
GitHub pages is a hosting provider for static pages. You can’t host APIs on it. If you really want to host on GitHub pages you’ll want to use https://github.com/zeit/next.js#static-html-export and not use API routes.
ZEIT Now allows you to use both static, dynamic and API routes in one application, so I would recommend having a look at that.
Please make it easy to get up and running with GitHub pages even if you want them to use Now instead.
We can’t make GitHub pages support API routes, dynamic rendering etc. It’s only for static files. Deploying to GitHub pages / static hosts is covered by next export
Use next/Head tag to add a font, put your font files in public/fonts
_document.tsx
class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head>
// <link
// rel="preload"
// href="/fonts/noto-sans-v9-latin-regular.woff2"
// as="font"
// crossOrigin=""
// />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}Pure CSS or Scoped CSS:
@font-face {
font-family: 'Noto Sans';
src: url('/fonts/noto-sans-v9-latin-regular.woff2');
font-weight: bold;
font-style: normal;
font-display: swap;
}Material UI SCSS:
const theme = createMuiTheme({
overrides: {
MuiCssBaseline: {
"@global": {
"@font-face": {
fontFamily: "Cascadia",
src: "url(\"/fonts/Cascadia.woff2\")",
},
},
},
},
typography: {
fontSize: 14,
fontFamily: [
"Cascadia", // your custom font here
"Source Han Sans SC",
"Noto Sans CJK SC",
"HanHei SC",
"-apple-system",
"BlinkMacSystemFont",
"\"Segoe UI\"",
"Roboto",
"\"Helvetica Neue\"",
"Arial",
"sans-serif",
"\"Apple Color Emoji\"",
"\"Segoe UI Emoji\"",
"\"Segoe UI Symbol\"",
].join(","),
},
});"dev": "NODE_OPTIONS='--inspect' next dev"In Windows, use
cross-envinstead:See ‘NODE_OPTIONS’ is not recognized as an internal or external command, operable program or batch file.
Once you open a new tab in Google Chrome and go to chrome://inspect, you should see your Next.js application inside the “Remote Target” section. Now click “inspect” to open a screen that will be your debugging environment from now on.
Windows 10 Issue
npm i cross-env -S -D{
"name": "your-app",
"version": "0.0.0",
"scripts": {
...
"start": "cross-env NODE_OPTIONS='--inspect' next dev -p 3001",
}
}Server Error
Error: The default export is not a React Component in page
This error happened while generating the page. Any console logs will be displayed in the terminal window.Add a default export instead of normal export:
DO NOT DO THIS:
export const Comics = (): JSX.Element => {
...
};
DO THIS:
const Comics = (): JSX.Element => {
...
};
export default Comics
Link .The standard NextJS Link usage:
<Link href={{pathname:'/',query:{name:'demo',id:1}}}>
<a>xxx</a>
</Link>And per ESLint rules you may need href for a tag.
The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.mdeslintjsx-a11y/anchor-is-validYou can skip the ESLint validation with below rule:
"jsx-a11y/anchor-is-valid": [0]<a> tagIf we used custom components as child of Link, we may need to pass a passHref
<Link href={chip.link || "#"} passHref>
<Chip
key={title}
size="small"
color={chip.title === highlight ? "primary" : "default"}
label={ `${title} (${count})` }
/>
</Link>TL’DR:
getStaticPaths determines the valid routesgetStaticProps determined the business logic after a valid route catchs.此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。