A starter template for Next.JS with Tailwind and MDX. Intentionally limited feature-set to keep things simple. (If you want a more comprenhensive starter template check out https://github.com/timlrx/tailwind-nextjs-starter-blog).
Includes instructions on how to rapidly customize the site.
Preview online at https://nextjs-tailwind-mdx-tau.vercel.app
Pre-configured with the following;
- Tailwind for easy styling. Booted off NextJS default tailwindcss example (https://github.com/vercel/next.js/tree/canary/packages/create-next-app)
- Markdown / MDX rendering support. All markdown/MDX in
/content/gets auto-rendered into the site. - Configurable e.g. site title etc (secret config in environment variables). See
Configurationbelow. - Simple theming via
components/Layout.js. Used to provide a standard them for all pages. Customizable NavBar and Footer with configurable nav links. - Analytics: Google analytics support following https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics
- SEO: basic SEO out of the box (via https://github.com/garmeeh/next-seo)
Execute create-next-app with npm or Yarn to bootstrap the example:
npx create-next-app --example https://github.com/datopian/nextjs-tailwind-mdx myapp
# or
yarn create next-app --example https://github.com/datopian/nextjs-tailwind-mdx myappThen run the app:
cd myapp
npm run devSee config directory:
config/siteConfig.jsfor site wide configuration especially for general theme (e.g. title) and SEOconfig/navLinks.jsfor configuration of navigation links
Open up pages/[...slug].js and change the CONTENT_PATH variable.
We suggest the following:
- Replace the favicon in
public/favicon.icoor use the svg favicon ... - Add a logo: add image to
publice.g. then opencomponents/layout.jsand replace footer logo link
Tweaking the theme in general: open up components/Layout.js and tweak away.