未验证 提交 66e1fa15 编写于 作者: T Tim Neutkens 提交者: GitHub

Add section on reading files (#11084)

上级 4b1ce16e
......@@ -94,6 +94,65 @@ export const getStaticProps: GetStaticProps = async context => {
}
```
### Reading files: Use `process.cwd()`
Files can be read directly from the filesystem in `getStaticProps`.
In order to do so you have to get the full path to a file.
Since Next.js compiles your code into a separate directory you can't use `__dirname` as the path it will return will be different from the pages directory.
Instead you can use `process.cwd()` which gives you the directory where Next.js is being executed.
```jsx
import fs from 'fs'
import path from 'path'
// posts will be populated at build time by getStaticProps()
function Blog({ posts }) {
return (
<ul>
{posts.map(post => (
<li>
<h3>{post.filename}</h3>
<p>{post.content}</p>
</li>
))}
</ul>
)
}
// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do
// direct database queries. See the "Technical details" section.
export async function getStaticProps() {
const postsDirectory = path.join(process.cwd(), 'posts')
const filenames = fs.readdirSync(postsDirectory)
const posts = filenames.map(filename => {
const filePath = path.join(postsDirectory, filename)
const fileContents = fs.readFileSync(fullPath, 'utf8')
// Generally you would parse/transform the contents
// For example you can transform markdown to HTML here
return {
filename,
content: fileContents,
}
})
// By returning { props: posts }, the Blog component
// will receive `posts` as a prop at build time
return {
props: {
posts,
},
}
}
export default Blog
```
### Technical details
#### Only runs at build time
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册