diff --git a/docs/basic-features/data-fetching.md b/docs/basic-features/data-fetching.md index b5eca093ed8b..121c2d959e60 100644 --- a/docs/basic-features/data-fetching.md +++ b/docs/basic-features/data-fetching.md @@ -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 ( + + ) +} + +// 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