https://github.com/hipstersmoothie/next-mdx-blog

Easily add a blog to any next.js based project.
https://github.com/hipstersmoothie/next-mdx-blog

Last synced: 12 days ago
JSON representation

Easily add a blog to any next.js based project.

• Host: GitHub
• URL: https://github.com/hipstersmoothie/next-mdx-blog
• Owner: hipstersmoothie
• License: mit
• Created: 2018-10-23T00:13:22.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-08T19:14:53.000Z (almost 2 years ago)
• Last Synced: 2024-10-02T18:40:10.716Z (about 1 month ago)
• Language: JavaScript
• Homepage:
• Size: 1.2 MB
• Stars: 74
• Watchers: 2
• Forks: 4
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-nextjs - next-mdx-blog - Easily add a blog to any next.js based project (Extensions)
• fucking-awesome-nextjs - next-mdx-blog - Easily add a blog to any next.js based project (Extensions)

README

        


  

  
next-mdx-blog

  
Easy blog for next.js



```


#### Usage with next.js

To use the components with next.js you have to flush the styles. This is a bug in styled-jsx component package + next.js. To remedy this manually flush the styles:

```js

import React from 'react';

import Document, { Head, Main, NextScript } from 'next/document';

import flush from 'styled-jsx/server';

import flushBlog from 'next-mdx-blog/dist/components/flush';

export default class MyDocument extends Document {

  static getInitialProps({ renderPage }) {

    const { html, head, errorHtml, chunks } = renderPage();

    return { html, head, errorHtml, chunks, styles: [flush(), flushBlog()] };

  }

  render() {}

}

```

#### List

A list of blog posts. Each post displays a small preview of it's content. You must dynamically require the blog posts to get the previews working. This component should be used to display the blog index.

`pages/blog.js`:

```js

import React from 'react';

import Head from 'next/head';

import BlogIndex from 'next-mdx-blog/dist/components/list';

import postsData from '../posts';

// Dynamically import the blog posts

postsData.forEach(post => {

  post.file = import('../pages' + post.filePath.replace('pages', ''));

});

const blogPage = ({ posts = postsData }) => (

  


    

      Blog Posts

    


    

  

);


// Before page loads await the dynamic components. prevents blog preview page flash.

blogPage.getInitialProps = async () => {

  await Promise.all(

    postsData.map(async post => {

      post.BlogPost = (await post.file).default;

      return post;

    })

  );

  return { posts: [...postsData] };

};

export default blogPage;

```

##### List Props

###### posts

The post index generated by the next plugin.

###### perPage

How many posts to display per page.

###### className

Classname for the root div.

###### stubClassName

Classname for the post stubs.

###### foldHeight

How much of the post should be displayed before the fold.

#### Post

A full blog post. To get your blog content to render inside the blog posts component your must either

1. Modify `_app.js` to render blog content inside appropriate wrapper

```js

import React from 'react';

import App, { Container } from 'next/app';

import Layout from '../components/layout';

import BlogPost from 'next-mdx-blog/dist/components/post';

import posts from '../posts';

// Override the App class to put layout component around the page contents

// https://github.com/zeit/next.js#custom-app

export default class MyApp extends App {

  render() {

    const { Component, pageProps } = this.props;

    const { pathname } = this.props.router;

    return (

      

        

          {pathname.includes('blog/') ? (

             post.urlPath === pathname)}

              className="content"

            >

              

            

          ) : (

            

          )}

        

      

    );

  }

}

```

2. Wrap blog content inside each `mdx` file. This is more work but you can customize each blog post.

```mdx

export const meta = {

  publishDate: '2018-05-10T12:00:00Z',

  title: 'First Post',

}

import Post from 'next-mdx-blog/dist/components/post'

# Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC

```

##### Post Props

###### children

Post body.

###### className

Classname to wrap the post in.

###### post

The post meta data to display.

##### \_app.js - Asset Prefix

If you are prefixing your URLS you will need to identify posts by prefixing the pathname.

```js

const prefixUrl = (p) => path.join(assetPrefix, p)

 post.urlPath === prefixUrl(pathname))}>

  

```