nextjs-mdx-blog-starter's Introduction

Next.js MDX Blog Starter

Next.js MDX Blog Starter for building blogs with Next.js and MDX, including Theme UI Component Design System, Vercel Deployment and more.

View Demo at nextjs-mdx-blog-starter.vercel.app

Deploy

Build and deploy with vercel. Install vercel if you haven’t already

npm install && vercel deploy

Customize

You can set properties like your blog title, description, Google Analytics code, social media sharing image and more by editing blog.config.js

Content for the about page, footer and blurb in the header are written in markdown/mdx. Find markdown content and blog post files in src/markdown.

If you would like to add more data to your posts, such as author information or other meta data, simple add more fields to the front matter in your mdx files and add the field names to the getStaticProps function for the various pages that display posts. See also the official Next.js Blog Starter which served as the basis for this project.

To edit the styling of the site, such as colors, typography and spacing, you can make changes to the theme file at src/layout/Theme.js. It is also there you can define styles for dark mode, or remove it.

Of course, you can change or add to the existing components in src/components/ui or edit or create new pages in src/pages and src/components/views.

To further customize the site, refer to the Theme UI documentation for making and styling your own components.

Writing Posts

To write a new post, create a new .mdx file in the src/markdown/posts directory.

Update the front-matter for the post with its title, excerpt, cover image and the publication date.

You can mark a post as a draft by adding draft: true to the front matter of the post and then it will only display in the local dev environment.

Title

The title will appear at the top of the post and will be used in the meta tags for the page.

Excerpt

The excerpt will appear on the posts listing and as the meta description for the post page. It can be formatted in markdown.

Cover Image

If included, the cover image will be displayed above the excerpt and post content. It will also be the main image that appears when the post is shared on social media. Be sure to also set the cover image alt value for accessibility.

nextjs-mdx-blog-starter's Issues

Dark/Light mode

Hi, You should check on the Dark/Light mode, it's bugging, you need to click twice on the button to switch.

Good luck 👍

Suggestion for the `disabled` prop on the `Button` component

Just a quick suggestion regarding an unnecessary use of a prop.

const Button = (props) => (
  <Btn
    disabled={props.disabled} // <--- this is unecessary
    sx={/**...*/}
    {...props} // <--- `disabled` will get overwritten here anyway
  />
)

You could instead deconstruct disabled, but I don't see the need. You can remove disabled all together, this way it will only appear on the component if passed in as props:

const Button = (props) => (
  <Btn
    sx={/**...*/}
    {...props} // <--- `disabled` will come up here if passed in as props
  />
)

How to upgrade the template to the latest React 18 including other dependencies

Hi there! Being not very good at next.js as well as libs that make up this super-template, i've just tried to upgrade all deps starting with React version. For that purpose used npm-check-updates package, and all it did - i believe - updated package.json.
Didn't work, to all appearances some other modifications in template files are also needed.
Would be much grateful for the update of this repo or short instructions on how to do it for for dummies :))
Please help

johnpolacek / nextjs-mdx-blog-starter Goto Github PK