My Blog List
{allPosts.map((post, idx) => (
))}
)
}
````
在这段代码中，我们从 `'contentlayer/generated'`中导出了 allPosts 变量，这有点让人奇怪，allPosts 到底是哪里定义的呢？
前面我们说过 contentlayer 的本质是实时编译，将 md 文档编译成普通的 js 文件，编译后的内容存放在项目根目录下的 `.contentlayer`文件夹中。
我们在 `contentlayer.config.ts` 中定义了一个名为 Post 的文档类型，对应的所有数据就是 all + 它的复数形式，也就是 allPosts。
再举个例子，如果定义的文档类型名称为 Page，对应的所有文档数据则为 allPages，它本质上一个包含所有导入 JSON 文档的数组。让我们打印下 allPosts 看一下具体的结构：
```javascript
[
{
title: 'Hello World Article',
date: '2014-05-01T00:00:00.000Z',
body: {
raw: "...",
code: "var Component=(()=>{var m=Object.create ..."
},
_id: 'first.mdx',
_raw: {
sourceFilePath: 'first.mdx',
sourceFileName: 'first.mdx',
sourceFileDir: '.',
contentType: 'mdx',
flattenedPath: 'first'
},
type: 'Post',
url: '/posts/first'
},
{
title: 'Hello Earth Article',
date: '2014-05-02T00:00:00.000Z',
body: {
raw: "...",
code: "..."
},
_id: 'second.mdx',
_raw: {
sourceFilePath: 'second.mdx',
sourceFileName: 'second.mdx',
sourceFileDir: '.',
contentType: 'mdx',
flattenedPath: 'second'
},
type: 'Post',
url: '/posts/second'
}
]
```
allPosts 是一个数组，每一个元素包含了该文档的所有 FontMatter 字段以及文档的原内容（body.raw）和编译后的内容（body.code）。
此时浏览器效果如下：
修改 `app/posts/[id]/page.js`，代码如下：
```jsx
import { allPosts } from 'contentlayer/generated'
import { useMDXComponent } from 'next-contentlayer/hooks'
import { notFound } from 'next/navigation'
import dayjs from "dayjs";
export async function generateStaticParams() {
return allPosts.map((post) => ({
id: post._raw.flattenedPath,
}))
}
export const generateMetadata = ({ params }) => {
const post = allPosts.find((post) => post._raw.flattenedPath === params.id)
if (!post) throw new Error(`Post not found for id: ${params.id}`)
return { title: post.title }
}
const Page = ({ params }) => {
const post = allPosts.find((post) => post._raw.flattenedPath === params.id)
if (!post) notFound()
const MDXContent = useMDXComponent(post.body.code)
return (