Customize your Next.JS App using next.config.js configuration file | Advanced Next.JS

hey there welcome back to the channel and today we'll be discussing how you can use the nextconfig.js file to define some custom behavior for your nexus application using these advanced configurations that you can provide here now some of you might remember from my previous video that using this very same file we were able to define the environment variables for our next year's application today we'll be seeing more features that we can add to our application using this file for example defining runtime configuration redefining the base path of your application defining redirects and more so without any further ado let's get right into it here we are on our same starter application that we've been using for our past few videos and here if you notice in the root directory itself next to the package.json file you have your next config.js file and as it's written here in the documentation is just a regular node.js module which is by default exporting an object so here in our current implementation there is just one key value pair for environment variables if you don't know what environment variables are and how to inject them i really recommend you to watch my previous video on this particular topic for now i'll just comment this key value pair out so currently our next config.js module is just exporting a empty object so one good thing to remember about next config.js file before we move forward is that this file is only available on the server side and during the build phases and is not included in the browser build so it will not be there on the client side bundle that gets generated after running next build now remember that this module can also export a function so here in the documentation there's an example where the next config file is exporting a function in this case it's an arrow function which has access to two parameters phase and default config and then within the function definition itself you're defining a new object called next config where you would place all of your key value pairs just like you were doing before so the object that you were exporting by default is just being created inside this function now and then being returned in the last line of the function now writing this as a function is helpful because you get access to this phase parameter now its value depending on the current or runtime context can be any of these five values so it can be export production build production server run development server run or your test environment hence allowing you to define different configuration for different kind of environments so these phases as written are available under next constants the file that i just showed you is the actual constants file and these are the five phases and as you can see they have written an if else logic here where they are simply saying that the current phase is a development server then a return development configs else written maybe production configs just to get started with things we will use a simple object but at the end of this video we'll also convert our object to a function here okay so that's basically all you need to know about this module in itself let's go ahead and jump into the first topic that we want to discuss which is runtime configuration now runtime configs can be of two types the first is server runtime config which is only available on the server side so for example whenever you're doing prop fetch for your server side rendered pages will be able to access this particular config object and the other kind is public runtime config which is available on both the server and client side so let's say in our server runtime config we have something called user endpoint it's the address of a get api which we want to use to fetch data and then there is something called username which is simply storing the full name of the user and this is basically it we have defined the two runtime configs in our application now before we go ahead and actually integrate our application with runtime configs let's first understand why do we need them and how are they different from environment variables now by definition environment variables are present in the external runtime environment but as you can see these values are present within the application itself although they will not be a part of your final bundle after the build is done they are still there present as code in your application now the use case is very simple if you have a few values which will be used regularly throughout your application instead of making them an environment variable you can just make them as a runtime config now on how to actually use these configs all you need to do is import get config from the next config module and then what this get config function does is upon calling it it will return both the server runtime and public runtime configs so what i can go and do next is just console.log server runtime config.user endpoint and publicruntimeconfig.username which are the two values that we just defined let's run our development server and as you can see here on the home page under client logs you are seeing undefined for server and time configs because obviously they should not be present on the client side while the client runtime configs can be accessed and here on the server logs you can see both types of runtime configs so next up what i'm going to do is i'll use the server runtime config user endpoint in place of the environment variable that i was using before while i'm making the api call so previously i was storing the endpoint as an environment variable now i'm storing it as a runtime config and here i'm just simply making a fetch call let's also console log the user details once they are fetched we'll save our changes hit our home page again and as you can see we are able to access the user details which means our runtime configs work as expected but one thing that you need to be careful about is every time you make a page use runtime configs that page will lose its static optimization and what i mean by that is even if your page was previously getting marked as a static page during build time for example in our pages folder i'll create a new page called starttic.js which will be a react functional component returning a let's say an empty different when we do next build this particular page will be rendered as static because there is nothing dynamic happening over here but if i was to use runtime configs this page will not be a static page anymore so just be careful of that fact because using runtime configs removes the static optimization of your pages so this might affect the load time or performance of these pages so just be very careful where you're using runtime configuration now next up i want to go over two more configurations we'll start with redirects first so redirects replace the page that is being sent as an http response whenever a user requests for a page on the address bar by some other page and for that all we need to do is add an async function called redirects to our object module now this function should be returning an array of objects and each of these objects will have three key value pairs the source which will contain the name of the route that is supposed to be replaced then the destination by what page should it be replaced by and if the change is permanent or not so permanent is just a flag here which is supposed to tell the user that the redirected page that he's seeing right now if that's a permanent change or a temporary change so let's go ahead and quickly implement this here i'm keeping the source as other whenever i'm requesting the other page i should be redirected to the index page which is present on the root route and i'm saying that this change is permanent now why will an application ever need a redirect there are quite a few use cases for example let's say there is a page which can be directly accessible but you still don't want people to be accessing that page without logging in in that case you can just redirect to the login page another use case can be let's say for a period of time one of your pages is unavailable and you'd like the user to be redirected to some other page so that can be an example of a temporary redirection let's save our changes we'll start our development server again and let's see how things look like so in the browser let's try to request for the other page and as you can see we're still on the index page now let's see what's happening on the network tab here whenever we request for the other route just see what happens we are getting back a status of 308 now 308 stands for permanent redirection similarly if we just change our permanent flag to false and start a server again this time the status code will be different so let's clear up the network tab hit the other route again and this time you're getting 307 back instead of 308 which is temporary redirect so like this you can define one or more redirect rules from the next config file itself for example here i also want the temporary static page that i created to redirect to the home page so i can add something like this within the array that's being returned by this function now one thing to make sure here is that you're running the latest version of nextgs so as you can see here redirects were added from version 9.5 and then later more features were added to it so from version 10.2 it supports the has filter property which basically filters when you should be redirecting for example here after source we have an array which is stored under the hash key and all it's doing is so whenever there is a custom header for redirect me only then the redirect will be applied let's see a very quick example of the has keyword so as per our current implementation whenever we request for the other page we are taken to the index page but let's go ahead and add a has filter here where only when the particular header redirect me is present only in those cases i want the redirection to happen so let's save this start a server again now you'll notice when i request for this particular page i'm actually being taken to the other page until and unless i don't add this custom redirect me header here the redirection won't happen so i've added the custom header now i'll request for it again and this time as you notice we are actually being redirected to the index page so this is how the haas keyword works within redirects you can mix and match more things too here so you can have multiple parameters to look out for or multiple cases in which the redirection could happen so please feel free to play around with this and add more constraints here since we were discussing custom headers let's also see how you can add custom headers in the response of any api or page that's requested so again here very similar to redirect we have an async function called headers which returns an array of objects and here we are mentioning the source as to which route should return the custom headers which are then mentioned under the headers key so let's go ahead and copy this example itself and we'll see it in action we'll go to our next config.js file let's collapse the redirects part for more visibility we'll copy our headers config and i want that whenever i request for the root route a new custom header should be returned in the response called custom header itself let's save these many changes will restart our development server let's go back to postman here we need to request for the root route so we'll send a get request to the root route and here you will see that in the response headers there is a new custom header called x custom header with the value that we just gave here similarly there are a lot of other configs that you can add to your next year's application i'll leave the link to the documentation there's a huge list of configurations that you could add now only cover the three important ones which i have used in my previous projects namely runtime configs redirects and custom headers and the video has gotten long enough already so if you want me to cover any more configs please mention them down in the comment below i'll probably do a compilation of a few of them together and make a part two of this video and before we conclude the video as i said we'll also be converting our simple object here which contains all the configurations into a function which has access to the phase and default config parameters so i'll convert this object to a function which in turn returns all the key value pairs as an object so i'll name this new object config and by the end of the function all i want to do is return this new config now for testing since we always have been running a development server let's go ahead and also add the spiff case that when the runtime phase equals phase development server or when we are running npm run div then this particular set of configuration should be returned so i'll add this additional if case here and i'll wrap the whole thing under its code block also we need to import one constant value from the next constants module so we'll import that here let's also add an else case which will run when we are not running a development server this block will be executed whenever you're running a production build using npm start and for your production builds the configuration can obviously be different from what you have there for development runs so let's restart a server and check if everything is still working fine we'll go back to our home page and as you can see we still have access to the runtime variables and we are also able to hit the api route and get the data from the correct endpoint so with this little if else logic here we were able to provide different next configuration for different environments this is all i had for the scope of the current video if this video helped you please like and share and also subscribe to this channel because i post similar videos every week thanks for watching and i'll see you guys in the next one

Channel: Mayank Srivastava

Views: 5,824

Keywords: next.js, nextjs, next js, nextjs tutorial, nextjs pages, learn nextjs, runtime configuration, runtime configs in nextjs, .env, next config, nextjs build, next.config.js, nextjs config, runtime config, nextjs redirects, redirect, custom headers, custom response, response headers, advanced nextjs, advanced concepts in nextjs

Id: fO9ACs7u-jU

Length: 14min 20sec (860 seconds)

Published: Sat May 07 2022