Here are 5 major Gatsby plugins you should absolutely know imho.
Gatsby plugin Catch Links
Replace all local links which have not been created with the gatsby link component. Unlike regular links, gatsby links do not trigger any refresh.
This substancially improves user experience ! The navigation is so fast and smooth !
Besides it’s particularly useful when sourcing data from CMS and external providers, e.g WordPress where post_content contains HTML.
Gatsby Plugin PostCSS
PostCSS is a set of JavaScript tools that allows you to enhance, optimize and reorganize your CSS, you can even add polyfills (only when necessary).
For example it’s easier to install an autoprefixer and there’s a super easy way to add CSS modules. You just have to name your CSS file with the .module extension (e.g App.module.css).
I like to add the following configuration to my gatsby-config.js :
{
resolve: `gatsby-plugin-postcss`,
options: {
postCssPlugins: [
require('postcss-preset-env')({
autoprefixer: { grid: true },
features: {
'nesting-rules': true
},
browsers: [
'> 1%',
'last 2 versions',
'Firefox ESR',
]
})
]
}
(don’t forget to run yarn add postcss-preset-envto use this snippet)
Gatsby Plugin Manifest
You can definitely add this plugin to your Gatsby projects. It handles a lot of useful configurations for mobile browsers : icons, favicons, cache busting, etc.
Gatsby Plugin Offline
Another MUST have plugin. It adds support for offline thanks to the service worker !
Combine it with the Gatsby Plugin Manifest and include your manifest file in the service worker. Then your website turns into a progressive web app !
Gatsby Plugin Page Creator
By default Gatsby will look in the src/pages folder to create pages. So if you want a contact page you basically create a component file called contact.js in this directory.
While it’s a very simple routing system to auto-create pages, it’s not modular at all. This plugins allows you to define other directories as sources for auto page creation.
Conclusion
5 great plugins for the Great Gatsby.