Live demo: https://mdx-ts-nextjs-starter.vercel.app/
This is a Next.js project bootstrapped with create-next-app
.
This is a boilerplate for creating blogs using MDX and NextJS with Typescript. Feel free to use this as a starting point for your projects.
- Typescript
- Write posts & pages in MDX format
- Built-in post caching
- Fuzzy search with tag filtering
- Minimal styling (SCSS - no tailwind)
- Embed Gists
- Automated post caching (pre-commit)
First, run the development server:
npm run dev
# or
yarn dev
Open http://localhost:3000 with your browser to see the result.
API routes can be accessed on http://localhost:3000/api/search. This endpoint can be edited in pages/api/search.ts
.
The pages/api
directory is mapped to /api/*
. Files in this directory are treated as API routes instead of React pages.
Posts are cached in order for the search API to work. Posts should cache automatically on pre-commit, but if they don't or you need to manually cache posts for testing run:
npm run cache-posts
- Add breadcrumbs
- SEO OG tags
- og:title for all pages/posts
- og:description for all pages/posts
- og:image for posts
- og:type data for posts
- Format dates
- Remove 'any' types
- Use query params on search page
- Add filter for authors
- Category structure
- Refactor GistEmbedHelper.js to TypeScript
- Implement Fuzzy search
- Add tags to search filters
- Add loading states for search results
- Upgrade to Next 13
- Mobile navigation
This starter is inspired by Rose Chege's static-nextjs-blog-with-typescript-mdx-tailwindcss
With search implementation inspired by Mat Swainson's nextjs-blog-search-api, but fuzzy