Start off your writing journey with this Next.js markdown blog template.
- Streamlined styling experience with Tailwind.css.
- Customizable typographic defaults with Tailwind Typography
- Automatic image preview and optimization with next-optimized-images.
- Lazyload images.
- Absolute imports.
- SEO friendly.
- Markdown code highlighting with react-syntax-highlighter and PrismJs.
- Dark Mode
- WebP image support
First, run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.
Tailwind Typography is an official tailwind plugin that provides a set of prose classes to add beautiful typographic defaults to any vanilla HTML you don't control (like HTML rendered from Markdown, or pulled from a CMS).
To customize the defaults provided by the plugin, add the overrides under the typography key in the theme section of the tailwind.config.js file. Refer to its default styles for more in-depth examples.
For more information, please check out Tailwind Typography's customization section.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
To learn more about Tailwind CSS, take a look at the following resources:
- Tailwind Documentation - learn about Tailwind CSS features and API.
- Add Sitemap
- Add RSS Feed
- Dark Mode
- Add support for WebP images
- Add SEO Component
- Add Dynamic Site Metadata
