We've now got Next j ust running inside of our communities cluster which is fantastic.
However I want you to be aware right away that sometimes Next j s can be a little bit finicky.
Let's go back over to our Ed really quickly.
I'm gonna find a banana dart J S file inside of our pages folder.
I'm going to change the string inside of here to have a banana to whatever just a very small change.
I'm then going to save this and put back over my browser.
You'll notice as soon as I save the file I see that change reflected inside the browser right away.
Now you're going to see I can just about guarantee it either.
You might not have seen that update right away or alternatively at some point time in the future you
might make a change to some code and not see it reflected in the browser as well.
So next to us unfortunately is a little bit finicky with file change detection when it is running inside
of a docker container.
So we're going to put in a little fix right now just proactively.
Even if you saw this thing change automatically when you save the file I still recommend you do this
because I personally have seen next year not always reflect file updates even if it sometimes appears
to work.
So here's what we're gonna do.
Back inside my client directory.
I'm gonna make a new file called next dot config Dot.
J.S. and then inside of here we're going to write out modules that exports we're gonna set that equal
to an object inside of here we're going to put in web pack Dev middleware and please double check your
spelling and capitalization on this we're then going to assign this an arrow function that's going to
take in some config variable that inside will do config that watch options dot Paul equals three hundred
and then we will return config.
There we go.
So what this file does this file is loaded up automatically.
Where is it.
There it is right there.
This file is load of automatically by next J us whenever our project starts up next is then going to
attempt to read this thing in it's going to take a look at this Web hack Dev middleware function and
it's going to call it with some middle path configuration that it has created by default.
We are changing a single option on there to tell Westpac that rather than trying to watch for a file
changes in some automated fashion instead pull all the different files inside of a project directory
automatically at once every 300 milliseconds.
Traditionally this change right here will fix this issue with file change detection when running inside
of a docker container.
But as I mentioned I have still notice that it is not 100 percent foolproof so if you ever start to
change any code and you feel as though that change is not being reflected on the screen inside the browser
we're going to want to try to somehow restart scaffold.
We'll take a look at how that's going to work eventually.
Right now let's just make sure that this change gets reflected inside of our running pod.
Now remember because this file is ending with a dot J.S. scaffold should sync this file into our running
pod automatically.
However next does not automatically restart itself whenever we add this file in or make changes to it.
Unlike changes that are made to react files.
So we need to somehow it just get our plot to restart itself to do so.
We're gonna go back over to our terminal.
We're going to list out all of our running pods with QCT I'll get pods and then we're going to manually
kill the client one right here by killing this pod.
Our deployment will automatically create a new pod and that new pod will have this updated config file
inside of it.
And next J.S. should read this config file it when it first starts up so I'm gonna go back over and
do a cube Seitel delete pod and then paste in the name of our client pod so I'll see that is deleted
I could do another get pods and I'll see that the pod has already been recreated.
Just five seconds ago so now this new pod should be running the updated config inside of it.
Now again if at any point in time you feel as though you have made a change that is not being reflected
inside the browser go through the same steps you see right here.
List out all your pods.
Delete the current client pod that pod will be recreated and the changes a 100 percent should be reflected
inside there.
OK.
So again just a quick little tip something that you're probably going to run into at some point time.
Let's take a pause right here and continue with our client in just a moment.