Blog

Blog

The Blog theme is powered by Nextra, if you want to know more about how to use it, you can check the official documentation (opens in a new tab).

Now, Let's create an entire blog with a few clicks.


  1. First you have add some packages to your project and some folders to your project, you can do this by running the following command:
terminal
pnpm add nextra nextra-theme-blog
cd src
mkdir pages
touch blog.mdx

  1. In the next.config.mjs file in your project’s root directory, replace the following code:
next.config.mjs
/** @type {import('next').NextConfig} */
import nextra from "nextra"
 
const nextConfig = {};
 
const withNextra = nextra({
  theme: 'nextra-theme-blog',
  themeConfig: './theme.config.jsx'
})
 
export default withNextra(nextConfig);

  1. Lastly, create the corresponding theme.config.jsx file in your project’s root directory. This will be used to configure the Nextra Blog theme:
theme.config.jsx
export default {
  footer: <p>MIT 2024 © ShipKwiq.</p>,
  head: ({ title, meta }) => (
    <>
      {meta.description && (
        <meta name="description" content={meta.description} />
      )}
      {meta.tag && <meta name="keywords" content={meta.tag} />}
      {meta.author && <meta name="author" content={meta.author} />}
    </>
  ),
  readMore: 'Read More →',
  postFooter: null,
  darkMode: false,
}

  1. Now, you can run the pnpm run dev command and go to http://localhost:3000/blog to start developing the project! 🎉