timlrx / tailwind-nextjs-starter-blog

This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.

Tailwind Nextjs Starter Blog

This is a Next.js, Tailwind CSS blogging starter template. Version 2 is based on Next App directory with React Server Component and uses Contentlayer to manage markdown content.

Probably the most feature-rich Next.js markdown blogging template out there. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.

Check out the documentation below to get started.

Facing issues? Check the FAQ page and do a search on past issues. Feel free to open a new issue if none has been posted previously.

Feature request? Check the past discussions to see if it has been brought up previously. Otherwise, feel free to start a new discussion thread. All ideas are welcomed!

Variations

Note: These are community contributed forks using different frameworks or with significant changes to the codebase - not officially supported.

Astro alternative - Tailwind Astro Template.

Remix-run alternative - Tailwind Remix-run Starter Blog Template.

Internationalization support - Template with i18n and source code.

Examples V2

• Demo Blog - this repo
• My personal blog - modified to auto-generate blog posts with dates
• Karhdo's Blog - Karhdo's Blog - Karhdo's Coding Adventure (source code)
• ben.codes blog - Benoit's personal blog about software development (source code)
• tsix blog - A front-end engineer is used to record some knowledge points in work and study 中文
• SOTO's Blog - A more personalized personal website upgraded from V1 (source code)
• Prabhu's Blog - Prabhu's Personal website with blog (source code)
• Rabby Hasan's Blog - Rabby Hasan's personal blog about full stack development with cloud (source code)
• enscribe.dev - enscribe's personal blog; cybersecurity shenanigans, frontend webdev, etc. (source code)
• dalelarroder.com - Dale Larroder's personal website upgraded from V1 (source code)
• thetalhatahir.com - Talha Tahir's personal blog. Added article thumbnails, linkedIn card, Beautiful hero content, technology emoticons.
• homing.so - Homing's personal blog about the stuff he's learning (source code)
• zS1m's Blog - zS1m's personal blog for recording and sharing daily learning technical content (source code)
• dariuszwozniak.net - Software development blog
• Terminals.run - Blog site for some thoughts and records for life and technology.
• markpitblado.me - Mark's personal blog about the internet, privacy, and books (source code)
• francisaguilar.co blog - Francis Aguilar's personal blog that talks about tech, fitness, and personal development.
• Min71 Dev Blog - Personal blog about Blockchain, Development and etc. (source code)
• Bryce Yu's Blog - Bryce Yu's personal Blog about distributed system, database, and web development. (source code)
• Remote Startup Senpai Anime Series Website - Landing page for the anime series Remote Startup Senpai.
• Secret Base - Jac Hsu's personal Blog.talks about tech, thought, and life in general.
• Zsebinformatikus - The information superhighway guide blog.
• Anton Morgunov's Blog - talking about science without oversimplifications or why theoretical and computational chemistry is cool.
• Hans Blog - Hans' personal blog, front-end technology, gallery and travel diary 中文. (source code)
• CuB3y0nd's Portfolio - CuB3y0nd‘s cyber security study notes「中文」
• London Tech Talk - A podcast exploring technology trends and expatriate living experiences. - 日本語
• CRUD Flow Blog - A technical blog about AI, Cloud Engineering, Data Science and Personal development
• Trillium's Blog - Modified to render resume pdf on /resume page
• Frank's Tech Blog - Frank's personal blog about software development and technology. (source code)

Using the template? Feel free to create a PR and add your blog to this list.

Examples V1

v1-blogs-showcase.webm

Thanks to the community of users and contributors to the template! We are no longer accepting new blog listings over here. If you have updated from version 1 to version 2, feel free to remove your blog from this list and add it to the one above.

• Aloisdg's cookbook - with pictures and recipes!
• GautierArcin's demo with next translate - includes translation of mdx posts, source code
• David Levai's digital garden - customized design and added email subscriptions
• Leo's Blog - Tuan Anh Huynh's personal site. Add Snippets Page, Author Profile Card, Image Lightbox, ...
• thvu.dev - Added mdx-embed, view count, reading minutes and more.
• irvin.dev - Irvin Lin's personal site. Added YouTube embedding.
• KirillSo.com - Personal blog & website.
• slightlysharpe.com - Tincre's main company blog
• blog.b00st.com - b00st.com's main music promotion blog
• astrosaurus.me - Ephraim Atta-Duncan's Personal Blog
• dhanrajsp.me - Dhanraj's personal site and blog.
• blog.r00ks.io - Austin Rooks's personal blog (source code).
• honghong.me - Tszhong's personal website (source code)
• marceloformentao.dev - Marcelo Formentão personal website (source code).
• abiraja.com - with a runnable JS code snippet component!
• bpiggin.com - Ben Piggin's personal blog
• maqib.cn - A blog of Chinese front-end developers 狂奔小马的博客 (源码)
• ambilena.com - Electronic Music Blog & imprint for upcoming musicians.
• 0xchai.io - Chai's personal blog
• techipedia - Simple blogging progressive web app with custom installation button and top progress bar
• reubence.com - Reuben Rapose's Digital Garden
• axolo.co/blog - Engineering management news & axolo.co updates (with image preview for article in the home page)
• musing.vercel.app - Parth Desai's personal blog (source code)
• onyourmental.com - Curtis Warcup's website for the On Your Mental Podcast (source code)
• cwarcup.com - Curtis Warcup's personal website and blog (source code).
• ondiek-elijah.me - Ondiek Elijah's website and blog (source code).
• jmalvarez.dev - José Miguel Álvarez's personal blog (source code)
• justingosses.com - Justin Gosses's personal website and blog (source code)
• https://bitoflearning-9a57.fly.dev/ - Sangeet Agarwal's personal blog, replatformed to remix using the indie stack (source code)
• raphaelchelly.com - Raphaël Chelly's personal website and blog (source code)
• kaveh.page - Kaveh Tehrani's personal blog. Added tags directory, profile card, time-to-read on posts directory, etc.
• drakerossman.com - Drake Rossman's blog about NixOS, Rust, Software Architecture and Engineering Management, as well as general musings.

Motivation

I wanted to port my existing blog to Nextjs and Tailwind CSS but there was no easy out of the box template to use so I decided to create one. Design is adapted from Tailwindlabs blog.

I wanted it to be nearly as feature-rich as popular blogging templates like beautiful-jekyll and Hugo Academic but with the best of React's ecosystem and current web development's best practices.

Features

• Next.js with Typescript
• Contentlayer to manage content logic
• Easy styling customization with Tailwind 3.0 and primary color attribute
• MDX - write JSX in markdown documents!
• Near perfect lighthouse score - Lighthouse report
• Lightweight, 85kB first load JS
• Mobile-friendly view
• Light and dark theme
• Font optimization with next/font
• Integration with pliny that provides:
  • Multiple analytics options including Umami, Plausible, Simple Analytics, Posthog and Google Analytics
  • Comments via Giscus, Utterances or Disqus
  • Newsletter API and component with support for Mailchimp, Buttondown, Convertkit, Klaviyo, Revue, and Emailoctopus
  • Command palette search with Kbar or Algolia
• Server-side syntax highlighting with line numbers and line highlighting via rehype-prism-plus
• Math display supported via KaTeX
• Citation and bibliography support via rehype-citation
• Automatic image optimization via next/image
• Support for tags - each unique tag will be its own page
• Support for multiple authors
• 3 different blog layouts
• 2 different blog listing layouts
• Support for nested routing of blog posts
• Projects page
• Preconfigured security headers
• SEO friendly with RSS feed, sitemaps and more!

Sample posts

• A markdown guide
• Learn more about images in Next.js
• A tour of math typesetting
• Simple MDX image grid
• Example of long prose
• Example of Nested Route Post

Quick Start Guide

1. Clone the repo

npx degit 'timlrx/tailwind-nextjs-starter-blog'

2. Personalize siteMetadata.js (site related information)
3. Modify the content security policy in next.config.js if you want to use other analytics provider or a commenting solution other than giscus.
4. Personalize authors/default.md (main author)
5. Modify projectsData.ts
6. Modify headerNavLinks.ts to customize navigation links
7. Add blog posts
8. Deploy on Vercel

Installation

yarn

Please note, that if you are using Windows, you may need to run:

set PWD="$(pwd)"

Development

First, run the development server:

yarn dev

Open http://localhost:3000 with your browser to see the result.

Edit the layout in app or content in data. With live reloading, the pages auto-updates as you edit them.

Extend / Customize

data/siteMetadata.js - contains most of the site related information which should be modified for a user's need.

data/authors/default.md - default author information (required). Additional authors can be added as files in data/authors.

data/projectsData.js - data used to generate styled card on the projects page.

data/headerNavLinks.js - navigation links.

data/logo.svg - replace with your own logo.

data/blog - replace with your own blog posts.

public/static - store assets such as images and favicons.

tailwind.config.js and css/tailwind.css - tailwind configuration and stylesheet which can be modified to change the overall look and feel of the site.

css/prism.css - controls the styles associated with the code blocks. Feel free to customize it and use your preferred prismjs theme e.g. prism themes.

contentlayer.config.ts - configuration for Contentlayer, including definition of content sources and MDX plugins used. See Contentlayer documentation for more information.

components/MDXComponents.js - pass your own JSX code or React component by specifying it over here. You can then use them directly in the .mdx or .md file. By default, a custom link, next/image component, table of contents component and Newsletter form are passed down. Note that the components should be default exported to avoid existing issues with Next.js.

layouts - main templates used in pages:

• There are currently 3 post layouts available: PostLayout, PostSimple and PostBanner. PostLayout is the default 2 column layout with meta and author information. PostSimple is a simplified version of PostLayout, while PostBanner features a banner image.
• There are 2 blog listing layouts: ListLayout, the layout used in version 1 of the template with a search bar and ListLayoutWithTags, currently used in version 2, which omits the search bar but includes a sidebar with information on the tags.

app - pages to route to. Read the Next.js documentation for more information.

next.config.js - configuration related to Next.js. You need to adapt the Content Security Policy if you want to load scripts, images etc. from other domains.

Post

Content is modelled using Contentlayer, which allows you to define your own content schema and use it to generate typed content objects. See Contentlayer documentation for more information.

Frontmatter

Frontmatter follows Hugo's standards.

Please refer to contentlayer.config.ts for an up to date list of supported fields. The following fields are supported:

title (required)
date (required)
tags (optional)
lastmod (optional)
draft (optional)
summary (optional)
images (optional)
authors (optional list which should correspond to the file names in `data/authors`. Uses `default` if none is specified)
layout (optional list which should correspond to the file names in `data/layouts`)
canonicalUrl (optional, canonical url for the post for SEO)

Here's an example of a post's frontmatter:

---
title: 'Introducing Tailwind Nexjs Starter Blog'
date: '2021-01-12'
lastmod: '2021-01-18'
tags: ['next-js', 'tailwind', 'guide']
draft: false
summary: 'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.'
images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg']
authors: ['default', 'sparrowhawk']
layout: PostLayout
canonicalUrl: https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog
---

Deploy

Vercel
The easiest way to deploy the template is to deploy on Vercel. Check out the Next.js deployment documentation for more details.

Netlify Netlify’s Next.js runtime configures enables key Next.js functionality on your website without the need for additional configurations. Netlify generates serverless functions that will handle Next.js functionalities such as server-side rendered (SSR) pages, incremental static regeneration (ISR), next/images, etc.

See Next.js on Netlify for suggested configuration values and more details.

Static hosting services / GitHub Pages / S3 / Firebase etc.

1. Add output: 'export' in next.config.js. See static exports documentation for more information.

2. Comment out headers() from next.config.js.

3. Add unoptimized: true to the images key in next.config.js:

   Alternatively, to continue using next/image, you can use an alternative image optimization provider such as Imgix, Cloudinary or Akamai. See image optimization documentation for more details.

4. Remove api folder and components which call the server-side function such as the Newsletter component. Not technically required and the site will build successfully, but the APIs cannot be used as they are server-side functions.

5. Run yarn build. The generated static content is in the out folder.

6. Deploy the out folder to your hosting service of choice or run npx serve out to view the website locally.

Note: Deploying on Github pages require addition modifications to the base path. Please refer to the FAQ for more information.

Frequently Asked Questions

• How can I add a custom MDX component?
• How can I customize the kbar search?
• How do I deploy on Github pages?

Support

Using the template? Support this effort by giving a star on GitHub, sharing your own blog and giving a shoutout on Twitter or becoming a project sponsor.

Licence

MIT © Timothy Lin

tailwind-nextjs-starter-blog's Issues

Issue with `filename` and `slug` posts with Nested Routes

If you check the Nested Routes post, you'll see that at the bottom, both Discuss on Twitter and View on GitHub don't work properly.

In the PostLayout, a comma , is introduced in both filename and slug instead of a slash /.

Example: nested-route,introducing-multi-part-posts-with-nested-routing

Blog Nested Routes??

I plan on doing a either a series blog post or dividing a post into bite size chunks so wanted to support nested routing of the blog route.

I've got a local branch that already supports it,

would anyone else benefit from this, should I open a PR??

Feature: Add support for Google Analytics

Is it possible to add the correct react component to include Google Analytics? It would be great if we can enable it only adding the ID in siteMetaDatajs.

I would try to add it and send a pull. If anyone is interested on this, could you vote?

References:
https://thetombomb.com/posts/google-analytics-nextjs
https://stackoverflow.com/questions/45848142/how-to-set-up-google-analytics-through-google-tag-manager-for-next-js

How do to change font family for this theme

Hi,

I'm trying to change the font family of this theme. How do I do it? I tried changing it in tailwind.config.js to -

      fontFamily: {
        //sans: ['Inter', ...defaultTheme.fontFamily.sans],
        serif: ['Literata', 'Georgia', 'Times New Roman', 'serif', ...defaultTheme.fontFamily.serif],
      },

and running npm run dev that does not seem to have any effect.

Thanks.

Suggestion: Enable React Strict Mode?

Hey @timlrx ,

Just curious what you'd think about enabling this:
"React's Strict Mode is a development mode only feature for highlighting potential problems in an application. It helps to identify unsafe lifecycles, legacy API usage, and a number of other features."
https://nextjs.org/docs/api-reference/next.config.js/react-strict-mode

I found this quote:
"However, writing code resilient to occasional re-running of useEffect is a good practice even without Fast Refresh. It will make it easier for you to introduce new dependencies to it later on and it's enforced by React Strict Mode, which we highly recommend enabling." -- https://nextjs.org/docs/basic-features/fast-refresh

I'm happy to submit the PR if you think it's a good idea.

Sitemap error

After running node .\scripts\generate-sitemap.js.
It creates few XML blocks which doesn't have any significance.

 <url>
    <loc>https://anksus.medata/authors/default</loc>
  </url>

  <url>
    <loc>https://anksus.medata/authors/sparrowhawk</loc>
  </url>

How do I go about to create Authors' page.

I would like to mimic what Tags does in pages/tags/[tag.js] but for authors,
How can I go about to modify the files and achieve something like that?

Also looking to add multiple authors not just one, so exactly like how tags work.

How to create the nested post with the next and previous button showing the post form that nested series

I couldn't understand how to change the sort by date with the sort by the post in the nested folder any help would awsome

Localization with i18n

Can you add localization option like i18n?

does "starter" mean I can't benefit from futur updates and won't be able to update code of the repo easily ?

thanx

Deleting blog posts

Hi, I really love the template, thank you so much. One thing: with the newest version (from May 4,2021, 0.3.0, commit 69a4193) it still breaks when deleting posts. To reproduce: I just deleted the blog files. I got

I found a similar closed issue posted by mrhut10 here, but noticed that this happens in the newest version as well..

how to change port on production?

I have a problem with change port on production:
I added to package.json:
"start": "cross-env TAILWIND_MODE=watch next-remote-watch -p 3011 ./data",
But it is not working, also not working npm run start -- -p 3011, the app still running in localhost:3000.

Can anyone help me?

Skipping a line in code does not show up after render

For example, the following code block,

```js
export const MDXLayoutRenderer = ({ layout, mdxSource, ...rest }) => {
  const LayoutComponent = require(`../layouts/${layout}`).default
  
  return (
    <LayoutComponent {...rest}>
      <MDXRemote {...mdxSource} components={MDXComponents} />
    </LayoutComponent>
  )
}
```

renders by removing the new line

export const MDXLayoutRenderer = ({ layout, mdxSource, ...rest }) => {
  const LayoutComponent = require(`../layouts/${layout}`).default
  return (
    <LayoutComponent {...rest}>
      <MDXRemote {...mdxSource} components={MDXComponents} />
    </LayoutComponent>
  )
}

is `next-compose-plugins` still being used?

Hi, and thanks for this project. I am trying to understand how this project works so I am doing some research. I am quite new to Next.js and many of the tools that this project uses.

I stumbled upon a package called next-compose-plugins and I was wondering if this is still being used.

I also saw there is another issue here regarding some features for the v1 of this project. I can +1 on Documentation, especially on how all the packages work together and maybe even how did you come up with this solution? As I said I am very new to all this so I am looking forward to understand and learn more about how it's done.

404 page when in development

Hey, I like the blog template a lot, thanks.

But I have an issue with getting the 404 "Sorry we couldn't find this page." when opening the homepage at http://localhost:3000/. It works fine after building and then starting it, but not in development mode. What could be causing this?

Pagination?

Thanks for the amazing work on this. Any chance you can add pagination to the: layouts/ListLayout.js. - If we have alot of posts, it just shows all the posts on that page, which is not ideal (we have 100 posts). Would be better to have pagination, and 20 posts per page. Or infinite scrolling also would be a good idea. Thanks.

PS add a tip jar to this repo.

Possible to generate static HTML vs XML?

I'd like to get HTML outputs when running npm run build so I could deploy this static site to AWS S3. I noticed that the build output is XML which I'm guessing is what Vercel wants. Is there a way this can build to HTML output?

Remove husky as a requirement?

Hey @timlrx ,
Do you think it's better to include instructions on using husky or to remove it as a dependency?

I went to commit locally after cloning the template, but I couldn't because husky not being configured threw an error.

That meant I had to pause what I was doing to npm uninstall husky -- then commit the package.json & package-lock.json files -- and then commit my actual changes.

I'm happy to update your template for whichever solution you think is best.

Nested Routing not working

Following the link to 'Introducing Multi-part Posts with Nested Routing' throws error 404.
I downloaded the repo. Built it and launched the site. Navigating to the nested-route entry does not work

Change Page's Publish Directory

Hello. I have built my blog and it works great. There is one thing i want to do but i don't know how. My english is limited to search the issue. I could make this in hugo with a single permalinks parameter.

My blog posts publishing under /blog directory and when i called a page, it shows like https://url/blog/sample-page so i would like to change this like https://url/sample-page.

How do i do this? Any help would be appreciated.

Mistake with sharing posts

I discovered a possible mistake with sharing posts. If you copy and paste the post link, there is no error. But if you try to share a post from a mobile device, then two pictures are substituted.

The example is on the screenshot for the post: https://www.timlrx.com/blog/growth-hacking-github-how-to-get-github-stars

The first variant where the copied link was used. The second variant where the post was shared on mobile devices (iPhone).

Segmentation fault in dev

Hi!
I'am getting a Segmentation Fault error while in dev, after going to the about page. The about page has an image and I guess that's the problem.

event - compiled successfully
zsh: segmentation fault  npm run dev

I've read somewhere that this is related to next/image but cannot find the source.

This happens on an M1 without Rosetta2 installed.

Any idea?

Issue with Redux store in MDX component

Originally posted by @timlrx in #60 (comment)

Thanks for your feedback. Sorry for re-opening this but I do think I am implementing the redux store correctly. I have done it the same way in another nextjs project before and it works fine. Furthermore, if I use the exact same component in a nextjs page, I don't get any error. But if I use it in an mdx page, it gives me the error above. So, I do think there needs to be some additional configuration to pass the store to the MDX @components but I'm not sure what it is.

For implementing redux, I had used the redux-toolkit example from nextjs
Any suggestions will be appreciated

This is my component
This is where I use it in a page and it's fine
And this is where it's added to an mdx data and I get the error

What new features would you like to see for v1?

Hi all,

I am thinking of improving the template by adding some new features. What would you like to see in the next major release? Feel free to add a comment with a new feature request and upvote (👍 ) the ones that you want!

Will add things that are being worked on or completed over here:

Progress Tracker

• Support for multiple authors
• Copy button for code sections
• Layout templates
• Easier theming of tailwind config
• Documentation

Next translate integration

Hi, thanks for the awesome work.

I was wondering if you tried an integration with https://github.com/vinissimus/next-translate or maybe someone have tried? I can't get to work any next.config.js with the provided config of the template and the next-translate package.

If someone has done something similar please let me now, thanks!

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /node_modules/unist-util-visit/index.js

Describe the Bug

When package.json updated to the latest version the console prints:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /node_modules/unist-util-visit/index.js

What version are you using?

next": "10.1.3
unist-util-visit": "3.0.0

npm 7.10.0

Tailwind JIT mode not updating styles

Problem

Sometimes the tailwind jit engine breaks in dev mode and new styles added is not reflected in the application. See related issue in: tailwindlabs/tailwindcss#4081

Possible solutions

1. As a temporary patch, try modifying the tailwind config file or deleting the .next folder and restart the dev server
2. If you are looking for a more permanent fix, downgrading to webpack v4 supposedly helps. In next.config.js:

future: {
    webpack5: false,
},

3. Another fix would be to opt-out of jit mode, by deleting this line in tailwind.config.js

We will update to the newest version of tailwind css when the problem is fixed, but otherwise, there are no further plans to update the template for now.

Build directions don't work with NPM only Yarn on node/NPM version on v14.16.0/6.14.11

Hello -

Just found your starter blog. It's definitely the best looking one out there! I am trying to run the blog but running into errors when using your build directions.

NPM Version: 6.14.11
Node Version: v14.16.0

To reproduce

$ git clone https://github.com/timlrx/tailwind-nextjs-starter-blog.git
$ cd tailwind-nextjs-starter-blog/
$ npm run dev

sh: next: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! [email protected] dev: `next dev`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

However I'm able to start the app successfully by running

yarn dev

Yarn version: 1.22.10

Maybe we can update the docs to use yarn? Or should we use a specific version of NPM/Node?

[Feature request] WebRTC Video

Is it possible to implement some sort of WebRTC video playback to share the bandwidth among users?

• To keep bandwidth cost extremely low
• Allow many people to watch hosted video content at the same time with fast loading speeds (even if the site is hosted on a home server)
• *(mostly) negate the need for a CDN (even when hosting lots of large videos)
• More users means even better performance (not the other way around)
• No reliance on third party video delivery services
• Works natively on all modern browsers
• Supports VOD and LIVE* video (*depending on implementation)

Method 1:
Using a HLS.js player such as Clappr with P2P Media Loader or CNDBye.
Demo example
Simple implementation tutorial

Method 2:
Using IPFS-JS implementation of IPFS protocol.
Demo example

Method 3:
Using WebTorrentPlayer which is built on WebTorrent which a lot of projects use.
How WebTorrent works.
Demo example

Small Bug: Tags

Hi there,
There is a small bug in the code, in that it expects every MD post to have tags. Ocassionally, a post doesn't have a tag yet, or the tags array is empty. As the code has tags.map in several places, this throws an error. The fix that worked for us, was just to do: tags?.map in the code (adding the ?). Might be something you may want to fix in the core. Hope this helps.

Changing /blog dir to /

Hi there,

I'd like to move my current weblog to tailwind-nextjs-starter-blog preserving URL structure. The problem that I need [website]/[id] instead of [website]/blog/[id]. For example:

http://localhost:3000/guide-to-using-images-in-nextjs

As I am a newbie in Next.js, I don't know what should I change exactly in source code. Can you help me? Thanks.

Should "preconnect" point to fonts.googleapis.com?

I had my automatic font optimization go out on my projects (as detailed in https://dev.to/ekafyi/first-impressions-on-next-js-automatic-font-optimization-32a1 ), which I'm in the process of fixing tonight.

Huh???

So anyway I was looking at my configuration, and I noticed something.

tailwind-nextjs-starter-blog/pages/_document.js

Line 25 in 89d21c3

<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />

Shouldn't this preconnect match the domain currently used?

tailwind-nextjs-starter-blog/pages/_document.js

Line 27 in 89d21c3

href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"

rss feed should be named differently than index.xml

Title. Sometime when I deploy to vercel and go to the main page, I got the rss feed instead of my homepage. This is because the feed is named index.xml. Rename it to something else E.G feed.xml fixes the issue for me.

Using redux toolkit store with an mdx component

Hi
I using your template and it's working really great. Thanks so much
However, I've hit a wall related to make a redux toolkit store available to a component that's placed inside an mdx file.
I have wrapped my whole app with the store provider as usual but on the page that loads the mdx file that has a component that needs to load data from the store, I get this error

Error: Could not find "store" in the context of "Connect(NameofComponent)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(NameofComponent) in connect options.

Do you have any suggestions how I would make the store available to a component inside an mdx file. I've had a similar issue with trying to load data asynchronously in an MDX component and I've had to use a different strategy that was not too convenient.

Deploying to Netlify?

Curious if anyone can get this to deploy to Netlify. When we tried deploying the current master with no changes at all we get the error below. Any ideas? What is the module 'pnpapi'?

(PS vercel deploys without any problems)

12:32:51 AM:   Dependencies installation error                               
12:32:51 AM: ────────────────────────────────────────────────────────────────
12:32:51 AM: ​
12:32:51 AM:   Error message
12:32:51 AM:   A Netlify Function failed to require one of its dependencies.
12:32:51 AM:   Please make sure it is present in the site's top-level "package.json".
​
12:32:51 AM:   In file "/opt/build/repo/netlify/functions/next_blog/next_blog.js"
12:32:51 AM:   Cannot find module 'pnpapi'
12:32:51 AM:   Require stack:
12:32:51 AM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/node_modules/@netlify/zip-it-and-ship-it/src/node_dependencies/resolve.js
12:32:51 AM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/node_modules/@netlify/zip-it-and-ship-it/src/node_dependencies/index.js
12:32:51 AM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/node_modules/@netlify/zip-it-and-ship-it/src/main.js
12:32:51 AM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/src/plugins_core/functions/index.js
12:32:51 AM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/src/commands/get.js
12:32:51 AM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/src/core/main.js
12:32:51 AM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/src/core/bin.js

Broken When No Blog Files

To support people setting up for the first time if they delete the template files then the application breaks. as there are hardcoded references to the first item in the posts array.

from memory its to access the date property on the first blog post. post[0].date

would be good to have a fallback render thats safe for the 0 length posts array.

anyway its a small thing, should be a easy PR for any of the people watching

Build is failing when draft is true and tags are present

First of all let me start of with saying what an amazing starter template this is. I've set it up with docker and deployed it on my own server. It was a breeze, so good job!

Just now i wanted to upload a new version of my site and the build started failing. Next to that the compose file does not generate the correct post file.

Steps to reproduce

• node ./scripts/compose.js "My fancy title" md
• Generated my-fancy title.md (notice the first dash is only present
  After editing the post title to be kebab case again, writing the actual post and having the draft set to true i wanted to build so i ran npm run build
• That resulted in TypeError: Cannot read property 'date' of undefined

Whenever i switched the draft to false and ran npm run build again, all things were fine again.

Errors on Vercel build

I am getting some strange errors when I try to import the site to Vercel. I use the default values. I had the site up until a few days ago when it would fail to build. I am not a developer am not sure where to start. Here is the Vercel log file.

I made a gist for a more readable format. Not sure why it looks bad in a preview.

https://gist.github.com/theapplegates/e3d2d065ec51b8531ce13631cfaaf0e4

01:17:37 Cloning github.com/theapplegates/crispy-parakeet-tailwind (Branch: main, Commit: 0e615ee) 01:17:38 Cloning completed: 652.690ms 01:17:38 Analyzing source code... 01:17:40 Installing build runtime... 01:17:45 Build runtime installed: 5222.614ms 01:17:49 Looking up build cache... 01:17:49 Build cache not found 01:17:51 Installing dependencies... 01:17:51 yarn install v1.22.10 01:17:51 warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json. 01:17:51 [1/4] Resolving packages... 01:17:51 [2/4] Fetching packages... 01:18:04 info [email protected]: The platform "linux" is incompatible with this module. 01:18:04 info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation. 01:18:04 [3/4] Linking dependencies... 01:18:04 warning " > [email protected]" has incorrect peer dependency "react@>=16.13.1 <=17.0.1". 01:18:04 warning " > [email protected]" has incorrect peer dependency "react-dom@>=16.13.1 <=17.0.1". 01:18:04 warning " > [email protected]" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". 01:18:15 [4/4] Building fresh packages... 01:18:16 Done in 24.48s. 01:18:16 Detected Next.js version: 10.1.3 01:18:16 Running "yarn run build" 01:18:16 yarn run v1.22.10 01:18:16 $ next build && node ./scripts/generate-sitemap 01:18:17 info - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5 01:18:17 info - Checking validity of types... 01:18:17 Attention: Next.js now collects completely anonymous telemetry regarding usage. 01:18:17 This information is used to shape Next.js' roadmap and prioritize features. 01:18:17 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL: 01:18:17 https://nextjs.org/telemetry 01:18:17 info - Creating an optimized production build... 01:18:22 warn - You have enabled the JIT engine which is currently in preview. 01:18:22 warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time. 01:18:32 info - Compiled successfully 01:18:32 info - Collecting page data... 01:18:33 info - Generating static pages (0/30) 01:18:34 info - Generating static pages (7/30) 01:18:34 info - Generating static pages (14/30) 01:18:35 info - Generating static pages (22/30) 01:18:36 Error occurred prerendering page "/blog/introducing-tailwind-nextjs-starter-blog". Read more: https://nextjs.org/docs/messages/prerender-error 01:18:36 TypeError: unsupported file type: undefined (file: /vercel/path0/public/static/images/twitter-card.png) 01:18:36 at lookup (/vercel/path0/node_modules/image-size/dist/index.js:51:11) 01:18:36 at imageSize (/vercel/path0/node_modules/image-size/dist/index.js:118:16) 01:18:36 at /vercel/path0/.next/server/pages/tags/[tag].js:551:26 01:18:36 at overload (/vercel/path0/node_modules/unist-util-visit/index.js:27:12) 01:18:36 at node (paragraph) (/vercel/path0/node_modules/unist-util-visit-parents/index.js:56:27) 01:18:36 at node (root) (/vercel/path0/node_modules/unist-util-visit-parents/index.js:67:75) 01:18:36 at visitParents (/vercel/path0/node_modules/unist-util-visit-parents/index.js:29:26) 01:18:36 at visit (/vercel/path0/node_modules/unist-util-visit/index.js:22:3) 01:18:36 at /vercel/path0/.next/server/pages/tags/[tag].js:546:3 01:18:36 at wrapped (/vercel/path0/node_modules/trough/wrap.js:25:19) 01:18:40 info - Generating static pages (30/30) 01:18:40 > Build error occurred 01:18:40 Error: Export encountered errors on following paths: 01:18:40 /blog/introducing-tailwind-nextjs-starter-blog 01:18:40 at /vercel/path0/node_modules/next/dist/export/index.js:31:1106 01:18:40 at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:5:584) 01:18:40 at async /vercel/path0/node_modules/next/dist/build/index.js:43:49 01:18:40 at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:5:584) 01:18:40 at async /vercel/path0/node_modules/next/dist/build/index.js:25:1475 01:18:40 at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:5:584) 01:18:40 error Command failed with exit code 1. 01:18:40 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. 01:18:40 Error: Command "yarn run build" exited with 1

Google Fonts are not loading

Google fonts don't have onLoad="this.media='all'"

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&amp;display=swap" media="print">

Firefox Dev Tools:

Error!

When i get to one of my posts i get this:

1 of 1 unhandled error
Server Error

TypeError: Cannot read property 'replace' of undefined
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source

layouts/PostLayout.js (60:55) @ PostLayout

58 | className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
59 | >

60 | {siteMetadata.twitter.replace('https://twitter.com/', '@')}
| ^
61 |
62 |
63 |

Please anyone help!

Build fails on Windows but works on WSL

Running on Windows 10 npm run build fails with the output below:

10 silly lifecycle [email protected] buildArgs: [ /d /s /c', 'next build && node ./scripts/generate-sitemap]
11silly lifecycle [email protected] build: Returned: code: 1 signal: null
12 info lifecycle [email protected]~build: Failed to exec build script
13 verbose stack Error: [email protected] build: next build && node ./scripts/generate-sitemap
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:315:20)
13 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:315:20)
13 verbose stack at maybeClose (internal/child_process.js:1048:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid [email protected]
15 verbose cwd C:\Users\PWSys\Documents\Projects\nexts_va_v07\nextjs_va_07
16 verbose Windows_NT 10.0.19042
17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build"
18 verbose node v14.16.1
19 verbose npm v6.14.12
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] build: next build && node ./scripts/generate-sitemap
22 error Exit status 1
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Steps to reproduce
npm install
npm run build

This works in Linux. Using the same directory through WSL V2, npm run build works without issue. Any suggestions for why this may be failing on Windows?
Thanks!

svg import error when upgrading to next 11

See related issue: vercel/next.js#26130

It's supposedly fixed in the canary branch, but I will wait until 11.0.1 is out before trying to patch things up.

Posting this in case anyone is getting upgrade problems..

Text is not contained in the class in the posts view

I think its this:

class="prose text-gray-500 max-w-none dark:text-gray-400"

Text is shown as one line breaking the container. I had a go to fix but only just started with tailwind.

Error with tailwind.css

I'm getting the following error message:
error - ./node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[6].use[1]!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[2].oneOf[6].use[2]!./css/tailwind.css
TypeError: Object.fromEntries is not a function

Accidental .RHistory file?

Don't think this belongs in this project: https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/master/.Rhistory.

Tambouille is on!

Hello,

A quick message to thanks timlrx and all contributors for the work done here. I used this template as a base for a cookbook aimed to my family: https://tambouille.vercel.app/

The code lives over there: https://github.com/aloisdg/tambouille

Have a nice day everyone

TypeError: allRules.flat is not a function

TypeError: allRules.flat is not a function

I am getting this error when I try to run it on codesandbox

timlrx.com (Demo blog 2) shows XML

Looks like there may be an issue with with timlrx.com

Feature image in list of blog posts

It would be great if you could pick a hero image for each blog post that could be shown to the left of the Title where thers is currently a lot of dead space.

Add support for comments via giscus

Hi there,

Thanks for the template, it looks really good!

I've got a suggestion, have you thought about adding support for comments? If not, I'm currently building giscus, a comments system powered by GitHub Discussions. If you'd accept a PR, I could look into adding giscus integration as an optional feature to this template.