Introduction to Next.js Customizing the Next.js Config

[00:00:00]
>> Now, we're going to talk about customising Next js. And the configuration of it and stuff like that. So, like I said out of the box, Next.js has a really good experience, right? Because it handles a lot of things for us like the Webpack, Babel. So all the different rendering modes that we'll talk about, pretty much everything.

[00:00:24] But if you wanna hook into that, and change some of it, opt in, opt out, extend, do things like that. We actually have this next config js file, that you can put on the root of your project. And that allows you to hook into the next day as, and you can pretty much do whatever you want there.

[00:00:44] Specific to the Next js or not specific to next year, is things like changing Webpack. And this is where you would add support for sass or stylus. Or less or maybe there's an SVG Loader for Webpack that you want to turn, react. SVG files into react components, something like that, like literally everything you normally would have done.

[00:01:08] You would do it here. For like create react app, the equivalent would be, okay. Create react app, doesn't have the loader that I want or doesn't have have it configured the way that I want from there. I think you'd have to do like the eject, the configuration, yourself that you can modify.

[00:01:25] And then you can no longer use create react app. Well, there's no eject feature here, because you're always gonna be using nextjs. You just can extend it by doing something like this. So, to me, this is a better experience, than having to opt out of something. And that's because next js as is a framework and not a set of built in opinions, that are managed by some scripts, it's a framework.

[00:01:49] So that's the difference. Other frameworks kind of do something similar. I know knucks, which is a view version of Next js, basically it's very inspired by next as is called knucks. They do something very similar with their configuration file, where you can just configure everything from that file.

[00:02:05] So pretty legit. And obviously, Gatsby does something very similar as well, so yeah. So yeah, like I said, you can create this config file, and basically there's a couple ways you can do it. So if we come down here, we can say next.config.js, and you can module.exports. This object like this all right, and you really don't have anything else.

[00:02:36] In fact, if I were to restart this you can see the first right there it says. Found a change and the next day is config, restart the service changed in effect. That means next as is looking for this file, like it knows it exists. It's a special file name, so the name is very important.

[00:02:49] So restart the server here, you'll see I get a warning. So warning, detected next config.js, but there was no export configuration found, is basically saying there's nothing here. Now, I don't know if you did that intentionally, or not, but hey, there's nothing here. We should probably figure some stuff out, right?

[00:03:07] So there are a lot of different things we can do here. Like for instance, and in my site here, the course curriculum, I'm talking about Webpack. And I'll just kind of do that here. So if you wanted to change some things about Webpack. Like, I don't know, maybe there was like some really dope Webpack plugin, that you wanted to do.

[00:03:26] You can add that here, because everything in this object. Is the same objects that's on the Webpack config, except they're gonna merge it with theirs. So it's not gonna completely blow out there. So what they have is gonna merge the two. So you can see that I'm pretty sure it uses a package called Webpack merge, that merges Webpack config smartly.

[00:03:46] So you can add whatever you want here. So versus if you have some plugin, that you want to add it to my webpack plugin, right? You can do that. And this is how you can add functionality to it. So for all my Webpack people that love getting crazy, you can still do it.

[00:04:02] You can do it here, and not have to opt out of everything that they give you. Pretty legit. So that's one way. The other way is that gives you just a little bit more power, as you can return a function. And this function has two arguments you get, what's called the face.

[00:04:20] Then you get this object here, that has a property on it called. I think it's called default config, maybe I'm pretty sure that's what it's called. So the default config is literally the default configuration for your next config, the one that gets created for you, if you don't make one.

[00:04:38] So with this, we have this phase here. This phase is gonna be a string, is actually gonna come from something called, let me see. I think like imports from next.js, constants, yeah, next constants. And, basically, there are some phases in here. There we go, so you can see phase production builds, phase production server, server prop, different things like that.

[00:05:10] So, I'm gonna say, phase production build. And basically, I can do something like this. I can say, if phase triple equals phase production build. Basically what this means is, if I'm running a production build inside of next js, run this code. So this allows me to change the configuration depending on what next js is doing.

[00:05:35] So a better example, would be let's look at phase development build, and see how that goes. So I'm pretty sure that one is phase development server, or something like that. So we say, phase equals phase development server, and then we do something like this console log. I'm in dev mode here.

[00:06:00] And you can return an object here, which will be your config. But for now it's gonna return the default config, and also return the default config down here, right? So we can do that and then when we start this. Yeah, I forgot you can't do. This config file doesn't get compiled by Babel, so you can't do imports and stuff like that.

[00:06:24] So we got to go back to common js, and use some good requires. There we go. So require that. And you see right here, I'm in dev mode, right? So you can see I'm in dev mode again, that's because it loaded up a bundle, right? This is a full stack app.

[00:06:50] So we have a server side build, and we have a client side built. And this was a demo for both of them. So a lot of that that twice. And yeah, it's pretty powerful. So you can do some pretty, pretty interesting stuff here. And this is just one use case of what you can do.

[00:07:06] So yeah, pretty interesting convention. Wow, I did not mean to close that. You open that back up, there we go, okay. All right, and then I added a link here, that links to all the different phases. It's not documented in their docs, at least not where I could find.

[00:07:24] But if you just go look in their source code, you can find them here. So, all different types of stuff, these four phases here, so we got export, we'll talk about export production build. I talked about that, production server is when it's live running on a server and production.

[00:07:41] And develop the servers when you run next by itself. So yeah pretty hot. Pretty nice here. I'm a big fan of is looking at source code. I go look at source code. I think more than I do documentation, so it's just I prefer sometimes. So yeah, I'll do that, any questions on that?

[00:08:02] On the config.
>> You have to modify the default config, or you just return a config object?
>> For question, so I'm not, I usually don't modify arguments. I try to keep things mutable, because you might cause side effects. So and especially because I'm pretty sure they do the merging for you.

[00:08:25] So I think it's safe to do something like this. If you're gonna do some modifications, as you can just spread over the default config, and then you can make your mods here. So whatever your mods are, yeah, you can make them here. So if you were gonna do something like Webpack, then you would do your Webpack stuff here, right?

[00:08:42] So you just spread over the default config, before and it's brand new object and then you do your stuff here. And I think that's a little safer than trying to modify this thing. Which yeah, I would stray away from modifying arguments in JavaScript in general. I would always steer away from that, especially objects and things like that.