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:
-
pathis the path relative to thepagesdirectory, e.g.index.mdforpages/index.md -
fileis the full file path, e.g./Users/cool/projects/sweet/pages/index.md -
metais an object containing any page metadata -
requirePathis 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.