diff --git a/examples/with-netlify-cms/README.md b/examples/with-netlify-cms/README.md index 05147176e604dd26d18caf16e93eb047eec52e55..8873d179b883a1ca2de577dae070457a6ce1c05b 100644 --- a/examples/with-netlify-cms/README.md +++ b/examples/with-netlify-cms/README.md @@ -41,5 +41,4 @@ Sites take its content from markdown files in `/content`. Two of pages (`home` a Blog component loads all posts (during build!) and lists them out [How to load multiple md files](https://medium.com/@shawnstern/importing-multiple-markdown-files-into-a-react-component-with-webpack-7548559fce6f) -Posts are separate static sites thanks to dynamically created export map. I took inspiration on how to do it from -[here](https://medium.com/@joranquinten/for-my-own-website-i-used-next-js-725678e65b09) +Updated to take advantange of the new `getStaticPaths` and `getStaticProps` data-fetching functions. diff --git a/examples/with-netlify-cms/next.config.js b/examples/with-netlify-cms/next.config.js index b2d7c9b9bde46058faab220d1ec27c41be81f609..d8767255714dfd4c57a152f0e59edb40f84445be 100644 --- a/examples/with-netlify-cms/next.config.js +++ b/examples/with-netlify-cms/next.config.js @@ -1,19 +1,3 @@ -const fs = require('fs') -const blogPostsFolder = './content/blogPosts' - -const getPathsForPosts = () => - fs.readdirSync(blogPostsFolder).reduce((acc, blogName) => { - const trimmedName = blogName.substring(0, blogName.length - 3) - return Object.assign(acc, { - [`/blog/post/${trimmedName}`]: { - page: '/blog/post/[slug]', - query: { - slug: trimmedName, - }, - }, - }) - }, {}) - module.exports = { webpack: configuration => { configuration.module.rules.push({ @@ -22,10 +6,4 @@ module.exports = { }) return configuration }, - async exportPathMap(defaultPathMap) { - return { - ...defaultPathMap, - ...getPathsForPosts(), - } - }, } diff --git a/examples/with-netlify-cms/pages/blog/index.js b/examples/with-netlify-cms/pages/blog/index.js index 9a17e722934dc834d69fb33f2533aaeefce9b631..97b275097d8af3e46e4ec255375bb9756b056f3f 100644 --- a/examples/with-netlify-cms/pages/blog/index.js +++ b/examples/with-netlify-cms/pages/blog/index.js @@ -40,9 +40,14 @@ const Blog = ({ postsList }) => ( ) -Blog.getInitialProps = async () => { +export async function getStaticProps() { const postsList = await importBlogPosts() - return { postsList } + + return { + props: { + postsList, + }, // will be passed to the page component as props + } } export default Blog diff --git a/examples/with-netlify-cms/pages/blog/post/[slug].js b/examples/with-netlify-cms/pages/blog/post/[slug].js index 2f9bb3956c16bebde037016ce458e5632a4e156f..b24c1d9148747b608b3c82027ecb725512642eb1 100644 --- a/examples/with-netlify-cms/pages/blog/post/[slug].js +++ b/examples/with-netlify-cms/pages/blog/post/[slug].js @@ -1,9 +1,11 @@ +import fs from 'fs' +import path from 'path' import Layout from '../../../components/layout' const Post = ({ blogpost }) => { if (!blogpost) return
not found
- const { html, attributes } = blogpost.default + const { html, attributes } = blogpost return ( @@ -24,12 +26,34 @@ const Post = ({ blogpost }) => { ) } -Post.getInitialProps = async ({ query }) => { - const { slug } = query +export async function getStaticPaths() { + const paths = fs + .readdirSync(path.join(process.cwd(), 'content/blogPosts')) + .map(blogName => { + const trimmedName = blogName.substring(0, blogName.length - 3) + return { + params: { slug: trimmedName }, + } + }) + + return { + paths, + fallback: false, // constrols wheter not predefined paths should be processed on demand, check for more info: https://nextjs.org/docs/basic-features/data-fetching#the-fallback-key-required + } +} + +export async function getStaticProps({ params }) { + const { slug } = params + const blogpost = await import(`../../../content/blogPosts/${slug}.md`).catch( () => null ) - return { blogpost } + + return { + props: { + blogpost: blogpost.default, + }, + } } export default Post