介绍
此文章的内容呢针对于nextjs的初学者
Next.js 是一个灵活的 React 框架，为开发者提供了构建高性能、可扩展 Web 应用的全套工具
Next.js 使用基于文件系统的路由
nextjs的实例可以参考usernameisregistered.github.io
开发注意事项
打包过程中的过程报错文件大小超128kB
修改配置文件next.config.ts，在配置文件修改属性largePageDataBytes
const nextConfig: NextConfig = { /* config options here */ experimental: { largePageDataBytes: 3 * 1024 * 1024 * 8, // 单位是字节 }};SSG生成后的文件无法直接发布在git page上
页面地址和内容
- 生成的静态页面位于
.next/server/pages - 生成后的静态资源文件位于
.next/static - 模板页面使用的静态图片位于
public - SSG生成的静态页面的资源引用地址
/.next/static/xxx
为了使得在git page上直接发布需要对静态资源进行整理和引用内容地址进行更改然后重写
可以参考export.js
使用[pid]/[id].tsx的动态路由SSG生成的页面不全面
当使用上述的动态路由模式时,当pid和id同时进行变化时，而且id存在多个内容时，虽然在开发环境中会不管有多少个id页面时能够正常预览的。但是在build是生成的页面会只有最后一个页面被渲染，其他的页面不只是被覆盖还是未生成；针对这种情况可以考虑将pid和id进行合并,使用单动态路由去渲染页面暂时没有找到好的解决方案，使用name/[allId].tsx去生成界面，以避免上述问题
针对不同的页面如何生成不同的title
在tsx的模板的render函数中使用next/head提供的组件容器Head, 如
<Head> <title>{title}</title> <meta name="keywords" content="{keywords}"/> <meta name="description" content="{description}"/></Head> ≡