Next.js does not make it easy to list or iterate over all of the pages in your app. Maybe this package can help!
npm install @primer/next-pages
In your next.config.js
:
const withPages = require('@primer/next-pages/plugin')
module.exports = withPages({
/* your config */
})
In your app, import the page map from @primer/next-pages
, and serialize it as JSON to see what's in it:
import {pageMap} from '@primer/next-pages'
export default props => (
<pre {...props}>{JSON.stringify(pageMap, true, 2)}</pre>
)
The pageMap
export from @primer/next-pages
is a Map object whose keys are the URL paths and values are objects with the following keys:
-
path
is the path relative to thepages
directory, e.g.index.md
forpages/index.md
-
file
is the full file path, e.g./Users/cool/projects/sweet/pages/index.md
-
meta
is an object containing any page metadata -
requirePath
is the path that you would pass to the function returned byrequire.context()
, as in:const requirePage = require.context('./pages', true, /\.md$/) const Page = requirePage(page.requirePath)
This module uses gray-matter to parse front matter from each file in the pages/
directory, and outputs that metadata in the JS bundle so that you can do things like:
- Know the title of each page, a la Jekyll
- Conditionally show or hide common content on some pages
- Generate navigation links and lists automatically
๐จ Note: this plugin does not handle outputting front matter in the JS bundle. It only reads it into the page map object so that you can use it elsewhere. You can make a loader that discards front matter in the houtput in just a couple of lines:
const matter = require('gray-matter')
module.exports = function removeFrontMatter(source) {
const {content, data} = matter(source)
return content
}
Ensuring that the above loader is executed after this module's is an exercise left to the reader.