5 major Gatsby plugins for the win

Here are 5 major Gatsby plugins you should absolutely know imho.

Permalink to heading Gatsby plugin Catch Links 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-catch-links

Permalink to heading Gatsby Plugin PostCSS 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 PostCSS

Permalink to heading Gatsby Plugin Manifest 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 Manifest

Permalink to heading Gatsby Plugin Offline 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 Offline

Permalink to heading Gatsby Plugin Page Creator 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.

Gatsby Plugin Page Creator

Permalink to heading Conclusion Conclusion

5 great plugins for the Great Gatsby.