现代化我的作品集：从 Vanilla PHP 到 Next.js（以及为何我的服务器认为我在 DDOS）

Source: Dev.to

为什么要重新设计？

全新、简洁、快速且流畅。虽然有无数富有创意的设计师激励着我，这次转变却标志着一个里程碑。它体现了我作为一名 (Spring Boot) 开发者的成长。Vanilla PHP 多年来为我提供了可靠的支撑，但要实现无缝的用户体验和优化的渲染，必须进行技术转型。切换到 Next.js 让我能够使用 静态站点生成 (SSG)。

• 之前： 每次请求都进行服务器端渲染，浪费宝贵的毫秒。
• 现在： 预渲染的 HTML 页面即时提供，呈现“瞬时启动”的体验。需要时仍可通过客户端 API 获取动态数据。

SEO 优化：技术基础

优秀的 SEO 不是附加功能，而是深植于架构之中。受我为开发者（德语）制定的 SEO 策略启发，我实现了以下措施：

• 结构化数据： 一个中心的 Person schema 使用 sameAs 和 rel="me" 将我的作品集与 Blogkurs（我的博客）上的工具关联，验证跨域身份。
• 语义化 HTML： 使用 、、“ 以及正确的标题层级（h1‑h6）帮助爬虫在无需猜测的情况下理解内容相关性。
• Next.js 元数据 API： 每个子页面都获得动态、极度优化的 meta 标签和 OpenGraph 图片，提升排名和社交分享预览效果。
• 性能： 图片优化（WebP/AVIF）、字体预加载以及移除阻塞渲染的脚本，使 Core Web Vitals 获得最高分。

注意： 可访问性仍需进一步完善。

在共享主机上预取

切换到 JavaScript 框架会增加复杂度。为静态导出配置 .htaccess 并处理 hydration 错误，需要深厚的技术知识以避免 SEO 损失。

• 自动预取： 默认情况下，Next.js 会在链接出现在视口时预取所有关联页面。
• 共享主机（Apache）上的问题： 这可能在短时间内产生大量请求，触发 mod_evasive 或 fail2ban 等安全模块，将流量误判为 DDOS 攻击。

在一次静态导出过程中，我的服务器自动封锁了我的 IP。解决办法是禁用预取：

import Link, { LinkProps } from 'next/link';
import { ReactNode } from 'react';

interface SafeLinkProps extends LinkProps {
  children: ReactNode;
  className?: string;
}

export default function SafeLink({ children, ...props }: SafeLinkProps) {
  return (
    
      {children}
    
  );
}

从传统 CMS 到 MDX

传统 CMS（如 WordPress）限制了我的工作流。笨重的所见即所得编辑器和杂乱的菜单对开发者而言格格不入，迫使采用一种阻碍创意与速度的结构。

选用的架构

• Markdown (MDX) 作为标准： 我在 IDE 中编写内容——与编写代码的方式相同。快速、简洁且可版本化。
• 设计自由度： 使用 React 和 Tailwind CSS 定制每个页面，使我工作更快、更轻松。
• 通过 Git 进行版本控制： 每一次内容更新都是一次提交，提供完整的历史、分支以及干净的部署流程。

结论

转向 Next.js 并非为了技术本身，而是为我的项目在网络上树立可信形象奠定基础。现代软件必须流畅地与搜索引擎对话。对于不习惯传统 CMS 环境的开发者而言，静态站点生成器提供了终极的解放。

最初以德语发布于我的作品集：Hendrik Haustein Portfolio*.