nextein: custom routes

next.config.js

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

const stories = ['food', 'cars'].reduce( (prev, entry) => ({
    ...prev,
    [`/${entry}`]: { page: '/stories', query: { category: `stories/${entry}` } }
}), {})

module.exports = nexteinConfig({
    exportPathMap: () => ({
        '/all-posts': { page: '/all-posts' },
        '/sub-section': { page: '/sub-section' },
        '/tags': { page: '/tags'},
        ...stories
    })
})

stories.js

// pages/stories.js

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

const category = 'stories'
const withStories = withPostsFilterBy(inCategory(category, { includeSubCategories: true }))

class Stories extends Component {
  
  static async getInitialProps ({ query }) {
    if (query) {
      const { category } = query
      return {
        selected: category
      }
    }
  }

  render() {
    const { posts, selected } = this.props
    
    const stories = posts.filter(inCategory(selected))
    return (
      <main>
        <h1>{selected.replace(`${category}/`, ``)}</h1>
        <section>
          {
            stories.map((story, idx) => (
              <article key={`${selected}-story-${idx}`}>
                <h2>{story.data.title}</h2>
                <Content {...story} excerpt />
              </article>
            ))
          }
        </section>
      </main>
    )
  }
}


export default withStories(Stories)

Here is an example of custom routes with nextein. In this example we use the posts under stories category. This also are divided in subcategories (food & cars) The code in next.config.js creates entries for a custom route for each subcategory using a common page stories.js component. The page component also declares the getInitialProps method the is needed to determine which sub-collection will be rendered.