This course has been updated! We now recommend you take the Introduction to Next.js 13+, v2 course.
Transcript from the "Plugins" Lesson
[00:00:00]
>> Plugins, all right so because the Next.js config file is dead simple and it has a convention, usually when there's conventions there's also gonna be plugins, right? Conventions usually equals plugins because where there's a set or rules that everyone has to follow, that means it's predictable. And if it's predictable, you can create common logic and plugins are just common logic is like, all people just use this anyway, so we'll just make a plug in, right?
[00:00:30] So Next.js has plugins, but honestly they don't even feel like plugins, they're just like extended configurations. I mean, they call them plugins, it doesn't even feel like they had to made it, it was so free that it was just like yeah, it's like they didn't really make a plugin system.
[00:00:45] It was just, the way that you configure your Next.js or sorry, your next config file, makes it so that plugins are possible, but I don't think they went and designed a plugin system because it's very, very simple. But basically it kind of looks like this, the convention is, most of the time you'll see something like this, like with under the name of the plugin, so kinda like a higher order component.
[00:01:07] So withOffline, withSass, withLess things like that, and that's kinda how you would use the plugin. And all you really do for most the time is you gotta just wrap the configuration that you have with the plugin. Because what most plugins do is that they might take in some options, so withOffline might take in some options as the first arguments like this, let me just demonstrate.
[00:01:33] So if I had to plug in like withOffline, or SSL, say this withMyPlugin, All right, let's just say we have that. And then what I'll do is get rid of this right click, and I'll make my config here so this will be my next configure here, Object right here.
[00:02:01] And then what I'll do is, let's say I have a plugin call withMyPlugin. Sometimes this plugin might take some arguments for the plugin so the args for the plugin go first. And then it's usually almost always your next config goes here. If your plugin doesn't take any arguments, it's usually just the next config.
[00:02:27] And the reason that happens is because at the end of the day, you have to return a config object inside of this file. So if you're using a plugin, then you pass your config object to the plugin and the plugin just returns it for you. So that's usually the convention and that's why it works that way.
[00:02:42] And that is actually really useful because it allows you to basically creates this system of plugins consuming plugins, right kind of like middleware in Express. So various Express is very similar to that. And that's exactly what we're gonna do now. So there's this really cool plugin called withPlugins, that allows you to compose plugins together a lot easier than if you did it yourself, and that's actually what we're gonna do now.
[00:03:09] So, what we're gonna do is we're gonna add a plugin that allows us to easily add environment variables to our next app, so without this plugin, the way you would have to add environment variables will look like this. With Next.js, so if I have this config, I will say module.exports = this object.
[00:03:30] I can say { env: and I could put, my {EVN: here, I can put whatever value I want. It's pretty simple, this works very fine, you might even ask yourself, why do I need a plugin, because everything you have here is gonna be injected into your code. So that means I'm able to use process.env.whatever you want, and it's going to give me the value.
[00:03:54] And if you ever use this plugin a web pack, what actually happens is when this file gets processed, it's going to replace this whole value here, this whole statement with the actual value. So as far as the browser is concerned, this is gonna be replaced with whatever the value was.
[00:04:10] So it's never gonna see process.env, it's never gonna see that, this thing gets completely replaced. So it's not the same thing as using process.env in a node environment which actually reads from the environment, this is just a simple replacement just replacing it as far as from the browser's perspective.
[00:04:26] So yeah, like I said, you might be asking well, why do we need a plugins it's actually pretty simple. Well, it's it's because this was a SECRET, You're not just gonna put this in here like this, all right? You're not gonna just hard code your secret API key here, and then check it in Git.
[00:04:43] Now you just wouldn't do that, hopefully not. So most likely you'll have a .env file, so we actually have one right here. So you should have a .env file in your repo, if you don't, you can make one, it's literally just a follow on the roots called .env.
[00:04:59] And the syntax for the env file kind of goes as this, you put the name of the variable that you want. And most environment variables are all caps and they use a underscores to or is it, was I called snake case like caps, snake case or something like, well, it's not snake case.
[00:05:13] Is it snake case? I don't know, so it'll do all caps like that followed by the equal sign and then whatever value you want for that environment variable. That's typically how a .env file works, and you can put more on the next line if you want, like that.
[00:05:30] All right so that's how .env files work, and then would you want to do is you make sure this file doesn't get checked in to GitHub, all right, so this file is not checked into GitHub, and you're good to go. So, now you can safely put your secrets in here, and then inside of here, you need to load up that .env and put it here and that could be pretty manual.
[00:05:48] So there's a plugin that kind of helps us with that, and that's what we're going to install. So in order to get this to work, please install two dependencies, we're gonna install next env, and then we're gonna install .env-load. So if you got NPM, you can copy that script, if you have yarn, you can copy that.
[00:06:03] I'm using yarn, so I'm gonna copy that. I'm gonna add that, And actually, you should just install this as a dev dependency, because it's only gonna use for building so, definitely save the new dev there. And once you have it, then all we're gonna do is just load up this plugin so it's actually pretty simple.
[00:06:24] All we have to do is imports or I'm sorry require what is it? Like nextEnv = require('next-env'), and then .envLoad = require('dotenv-load'). So then what we're gonna do is we're gonna say .envLoad like this, and what this does is, this is gonna look for a env file in your folder, grab every environment variable in there, and inject it into the environment for you, so you don't have to do anything.
[00:07:00] And then from there, all we're gonna do is use this nextSnv, plug in, like that. And that's going to allow us, or I'm sorry, you call the plugin I got it backwards so you had to do it that way. So what we'll do is we'll say, withEnv = nextEnv.
[00:07:25] There we go, nextEmv, and then that, we can use that plug number here with Emv. So what this is gonna do is, it's basically gonna look at the Emv file, load up all the environment variables in the environment, inject them, this right here is actually creating the plugin with the environments loaded into it automatically.
[00:07:43] So in the background you can imagine, there's gonna be a config that looks something like this. So, There's gonna be a next config that has env on it, just like we had before, and then every variable that's here, so in this case, this HELP_APP_URL is gonna be here with the actual value.
[00:08:11] Like that, right? So all that is being done for us with these plugins and the combination of that little, so that's just for free. So now we get to do that. Pretty free, pretty easy way to load yourself up for development, and yeah, I have a warning here, don't check that into Git if you never use .env files, please don't check them into Git that's the whole point.
[00:08:32] And then the last thing we'll do is we'll just update, we'll use this environment variable somewhere, so I'm just using it as an anchor tag inside of the nav component, so we'll just do that. And I'm just gonna copy this, and we're gonna go into our nav component here.
[00:08:46] And I'm just gonna add that anchor tag after the link, and fix that formatting, and some more indents, there we go. And basically, it's just a link to like an external help app desk or something that you have for your customers on your note app, that's it, just to demonstrate how this will work.
[00:09:04] So remember, this gets completely replaced with a string as far as the browser's concerned. So we got that, I might have to start the app again, [SOUND] there we go. And you can see I'm still getting, you have no export configuration, that's because I did not put a configuration here, right?
[00:09:27] So I don't have an export so I'm totally fine with that warning. I have nothing to export there, so it's totally fine. Go back here and now you see I have this Help thing here that points to Frontend Masters, right? So whatever URL that you put in that Emv file, is what's gonna be there.
[00:09:45] And like I said, you can do all different types of stuff with these plugins, very legit, very simple to work with. Any questions on plugins and configuration with the next config file?
>> Yeah, is there a place like in the documentation that lists all the plugins that you can use, or just how do you find them?
[00:10:12]
>> Yeah so there are official ones, and I'll show you those right now. And then most of them are just like any other plugins, their community plugins, so everyone has their own thing. But if you go to Vercel > Next Plugins, here's all the official ones, that they that they have, are they here are some notable community ones.
[00:10:31] But I'm sure you'll find dozens of more that aren't even on this list. And the other thing is that Next.js has as recently released a new version 9.3, and these new versions, I've actually changed how some of these plugins work and stuff like that. So just be careful about when the last time one of these plugins was updated, make sure it was, updated last couple months.
[00:10:52] Cuz if it's like a plugin from two years ago, it might not work with how Next works now, so just be careful of that. But yeah, they got some pretty good plugins here, like Preacts, if you're anti-Facebook, but you like React then Preact might be the way to go.
[00:11:06] It's a drop in replacement, things like that. TypeScript was actually you don't need anymore because TypeScript is supported from Next.js out of the box, which is actually I'm about to show you how that works. So yeah, stuff like that. So yeah pretty good, some really nice plugins out there.
[00:11:22] But at the end of the day, most of them just kind of modify the Webpack config, at the end of the day. They take some Webpack logic, they wrap it in the Next.js configurable plug in and boom, there you go. Most of them that's what they do.