随着现代Web开发的演进，开发者和内容创作者越来越重视内容的灵活访问与分享方式。Next.js作为流行的React框架，因其性能优越和丰富的功能备受欢迎。许多技术博主和内容平台希望不仅能美观地呈现博客文章，还能直接提供原始Markdown内容，方便读者学习完整的写作源码。实现这一目标的一个绝佳方式是为博客路径提供.md后缀的URL，这样用户通过访问带有.md结尾的链接，便能直接获取原生Markdown文本。本文将以Next.js为例，深入介绍如何优雅且高效地实现这一功能，同时保证代码结构清晰且性能优秀。 该方法的核心灵感来自于Vercel官方文档网站，创始人Guillermo Rauch推荐使用Next.js rewrites（重写规则） 替代传统中间件方式，实现逻辑更简单且响应更快速。
通过rewrites，用户访问/posts/my-post.md时，实际请求会被重写至/api/posts/my-post/raw，相当于为每篇博客自动生成了原始内容的接口，极大便利了内容调用和数据共享。 实现这个功能的第一步是创建Next.js项目，并引入Content Collections库。Content Collections是一个类型安全且性能优良的内容管理解决方案，极大地简化了MDX格式内容的处理流程。借助它，我们可以定义文章集合，规范文章元数据，自动生成slug和URL等信息，确保内容管理高效且可维护。 在项目根目录创建content-collections.ts文件，定义posts集合，从content文件夹中读取所有.md和.mdx文件，使用zod库校验文章的标题、描述及日期，利用compileMDX将MDX内容编译为可渲染的React组件。同时生成slug便于路由访问。
更新next.config.js时需使用withContentCollections高阶函数，确保内容管理插件正确集成。 此外，调整tsconfig.json配置，添加路径映射支持更简洁的导入语法。完成配置后，在content目录下新建示例文章hello-world.mdx，内含标题、描述、日期和正文示例，包括加粗文本及代码块。这样，我们就拥有一篇完整的示范内容，方便测试及演示功能。 在页面部分，首页列表页面app/page.tsx通过调用allPosts数组，按日期倒序排序展示帖子的标题、描述和发布日期，同时为每篇文章新增可点击的“查看原始Markdown”链接，链接地址即为/posts/slug.md。文章详情页app/posts/[slug]/page.tsx负责渲染文章详情，使用MDXContent渲染文章内容，并在页面中同样提供查看原始Markdown的入口。
这样用户无需手动拼接链接即可方便地访问原始源码。 实现URL重写是此功能的关键。打开next.config.js，添加rewrites配置，将/posts/:slug.md重写到/api/posts/:slug/raw路径。此举令用户浏览器地址栏中保持.md形式，而请求内部转发到API路由获取实际数据。API路由app/api/posts/[slug]/raw/route.ts根据slug匹配对应文章，返回Markdown纯文本，并带上合理的缓存控制头，确保内容被浏览器和CDN适当缓存，提高响应速度和服务器效率。 当访问/posts/hello-world.md时，用户看到的页面即为该API接口返回的原始Markdown文本，这为技术内容分享、教育、调试提供极大便利，尤其适合需要分析文章结构或提取代码示例的用户和服务。
相较于复杂的中间件实现，利用Next.js rewrites和API路由构建这样一套系统不仅代码简洁，还便于维护和扩展，同时充分利用Next.js路由系统的静态生成优势，确保性能与SEO表现。 开发者可以进一步基于这一方案自定义缓存策略、权限控制或内容格式转换，以匹配各种具体需求。比如可增加请求限流以保护API，或在提供的Markdown之上加层渲染以支持多种格式。如需结合Tailwind CSS，页面的样式管理也将更加便捷灵活，提升用户体验。 总结来说，Next.js结合Content Collections与rewrites机制完美地实现了为博客文章提供.md原始内容访问路径的需求，既保障了用户浏览体验，也为内容开发和分享提供了强力支持。无论是技术博主还是企业网站，都能轻松借助此方案提升内容管理与交互能力。
实践中，合理运用静态生成和API缓存，搭配完善的代码结构与路由设计，将确保项目结构清晰、性能优异且便于持续迭代。未来，随着内容需求不断多样化，这种灵活访问原始数据的方案必会成为许多Next.js项目的标准配置。
