Note: the section-theme-blog package is deprecated and moved to a different location. Check out the new package now.

Start your blog journey with Next.js, Nextra, and MDX using section themes. You can start your blog in less than two minutes, and you need only one command and zero configuration. Section theme comes with an inbuilt dark mode, a search bar, Customize Navigation, and SEO Support.

Installation

The Installation of the section theme blog is a lot easier. You can install the section theme blog with the following command.

1pnpm add nextra section-theme-blog

1yarn add nextra section-theme-blog

1npm install nextra section-theme-blog

Configure the section theme with Nextra

Create the following next.config.js file in your project’s root directory:

1// next.config.js
2
3const withNextra = require("nextra")({
4  theme: "section-theme-blog",
5  themeConfig: "./theme.config.tsx",
6});
7
8module.exports = withNextra();

Create Theme Config file

The lastly create a theme.config.tsx or theme.config.jsx file in your root level.

1// theme.config.tsx
2
3import type { SectionBlogTheme } from "section-theme-blog";
4
5const themeConfig: SectionBlogTheme = {
6  siteURL: "http://localhost:3000",
7  logo: {
8    text: "Section",
9    svg: (
10      <svg
11        width="24"
12        height="24"
13        viewBox="0 0 24 24"
14        fill="none"
15        xmlns="http://www.w3.org/2000/svg"
16      >
17        <path
18          d="M12 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3H20C20.5523 3 21 3.44772 21 4V12"
19          stroke="black"
20          strokeWidth="1.4"
21          strokeLinecap="round"
22          strokeLinejoin="round"
23        />
24      </svg>
25    ),
26  },
27  primary_navigation: [
28    {
29      route: "/",
30      name: "Home",
31    },
32    {
33      route: "/posts",
34      name: "Blog",
35    },
36    {
37      route: "/about",
38      name: "About",
39    },
40    {
41      route: "/contact",
42      name: "Contact",
43    },
44  ],
45  secondary_navigation: [
46    {
47      route: "/disclaimer",
48      name: "Disclaimer",
49    },
50    {
51      route: "/privacy-policy",
52      name: "Privacy policy",
53    },
54  ],
55  social_links: [
56    {
57      name: "Twitter",
58      url: "https://facebook.com/officialrajdeepsingh",
59    },
60    {
61      name: "Github",
62      url: "https://facebook.com/officialrajdeepsingh",
63    },
64  ],
65};
66
67export default themeConfig;