- Published on
#TIL: Using littlefoot.js with Next.js
For a long time, I've had some ideas of what I would want my blog to look like, many of which were inspired by other blogs I've read, like Hynek's use of bigfoot.js for better looking footnotes1.
When I [finally] sat down to start working on a blog, it was one of the first things I looked into. I noticed bigfoot.js
wasn't actively maintained, and required jQuery
, so I decided to take a quick look at what else was out there and came across littlefoot.js -- a fork of bigfoot
that doesn't require jQuery
🎉🎉🎉
Adding littlefoot to this Next.js-based blog was as simple2 as:
import { useEffect } from 'react'
import 'littlefoot/dist/littlefoot.css'
export default function App({ Component, pageProps }) {
useEffect(() => {
const { littlefoot } = require('littlefoot')
littlefoot()
})
// ... rest of App
}
Footnotes
Like this! 😃 ↩
It turned out to be simple, but didn't start that way.
I've been wanting to start a blog for a while, and also wanted to learn Next.js; so I figured: why not do it at the same time using this awesome template?
But, given I'm not so familiar with React, Next.js, this template, or littlefoot; it took a while to figure out where it belonged...
And honestly, it still might be in the wrong spot ... but it works 😅 ↩