2024年使用Nextjs重构主页

最近在使用Nextjs完成工作，用的很舒服，遂决定用来重构许久不动的主页

技术选择

首先是框架，除了Nextjs之外，我平时也很常用的tailwindcss，可以快速构建网站页面。经过查找最后决定使用"开箱即用"的 tailwind-nextjs-starter-blog作为基础来重构主页。

设计参考

很喜欢这种干净的页面，但是同时又有不少小设计，作为参考来制作。

未完成

问题与一些解决方案

favicons以及manifest

动效框架

github page静态部署

关于静态部署如何设置，在文档中写的很清楚tailwind-nextjs-starter-blog，设置过就可以build了。

唯一需要注意的是，github page使用jekyll部署，会自动忽略下划线开头的文件，导致_next文件夹中的js css无法加载，在其中新建一个.nojekyll即可

meta信息

过滤Post的修改

在修改Post过滤过程中，其实就是daaft设置为true，在dev模式还能正常显示，在build模式就会消失，如果想要做一些修改可以搜索一个外部方法 allCoreContent ，这个方法会在NODE_ENV为production的时候过滤掉draft修改。然后做自己的修改即可。

评论系统

tailwind-nextjs-starter-blog 所提供的comments组件似乎有一些加载问题，所以最后还是自己解决吧。

npm i @giscus/react

//作为组件中使用  现在giscus官网获取id 然后将下面替换即可
import Giscus from '@giscus/react';
export default function MyApp() {
  return (
    <Giscus
      id="comments"
      repo="giscus/giscus-component"
      repoId="MDEwOlJlcG9zaXRvcnkzOTEzMTMwMjA="
      category="Announcements"
      categoryId="DIC_kwDOF1L2fM4B-hVS"
      mapping="specific"
      term="Welcome to @giscus/react component!"
      reactionsEnabled="1"
      emitMetadata="0"
      inputPosition="top"
      theme="light"
      lang="en"
      loading="lazy"
    />
  );
}

build后的中文路径问题

我在dev模式中没有问题，但是当我打包build后出现路径问题。

// app/blog/[...slug]/page.tsx
const isDev = process.env.NODE_ENV === 'development'
const isBuild = process.env.NEXT_PUBLIC_IS_BUILD === 'true'
export const generateStaticParams = async () => {
	if (isDev) {
		return allBlogs.map((p) => ({
			slug: p.slug.split('/').map((name) => encodeURIComponent(name)),
		}))
	} else {
		return allBlogs.map((p) => ({
			slug: p.slug.split('/').map((name) => decodeURI(name)),
		}))
	}
}

// next.config.js
const isDev = process.env.NODE_ENV === 'development'
const isBuild =process.env.NODE_ENV === 'production' && process.env.NEXT_PUBLIC_IS_BUILD === 'true'
env: {
	NEXT_PUBLIC_IS_BUILD: isBuild.toString(),
},

// package.json
"scripts":{
	"build": "cross-env NEXT_PUBLIC_IS_BUILD=true && cross-env INIT_CWD=$PWD next build && cross-env NODE_OPTIONS='--experimental-json-modules' node ./scripts/postbuild.mjs",
}