Edit this on


Creating Pages

In the previous guides we have seen how to create your index page listing all your posts, how to filter them, and how to render a single post. Now we are going to explore how to create a different section page.

We will generate a new page (or section) for posts in a certain category. By default, if you nest your posts in subfolders, the generated category matches the directory structure. This means that if you have posts in posts/blog then the blog category is assigned automatically.

If we want to create our blog as a separated section, we can generate our /blog by creating a new page component pages/blog.js. This component will render only those posts within the blog category:

import React from 'react'
import { withPostsFilterBy, inCategory } from 'nextein/posts'
import { Content } from 'nextein/post' 

const fromBlog = withPostsFilterBy(inCategory('blog', { includeSubCategories: true }))

export default fromBlog(({ posts }) => (
      posts.map((post, idx) => <Content key={`post-${idx}`} {...post} excerpt />)

Now, this is not different from the example in the previous guide. But in this case we want to generate a /blog. To do that, we just need to adjust our exportPathMap in next.config.js as follows:

const nexteinConfig = require('nextein/config').default

module.exports = nexteinConfig({
  exportPathMap: () => ({
    '/blog': { page: '/blog' }

That's all you need. You should be able to navigate to localhost:3000/blog if you run npm run dev.