loading...
Cover image for 5 major Gatsby plugins for the win

5 major Gatsby plugins for the win

jmau111 profile image Julien Maury Updated on ・2 min read

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.

Download gatsby-plugin-catch-links

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',
           ]
       })
    ]
} 
Enter fullscreen mode Exit fullscreen mode

(don't forget to run yarn add postcss-preset-envto use this snippet)

Download Gatsby Plugin PostCSS

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.

Download Gatsby Plugin Manifest

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 !

Download Gatsby Plugin Offline

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.

Download Gatsby Plugin Page Creator

Conclusion

5 great plugins for the Great Gatsby.

Posted on by:

jmau111 profile

Julien Maury

@jmau111

Practise what you preach.

Discussion

pic
Editor guide