In this section we'll add
some interactive functionality to our website.
At the moment all the content in our blog
is completely static.
Not only in the sense that
Next.js generates static pages,
but also in the sense that
there is almost no user interaction.
The user can only read
the content displayed in the pages.
There is actually one type of interaction
the user can do:
and that's clicking on a link
to open a different page.
And this is in fact an example
of client-side functionality,
because we mentioned before that
Next.js does client-site navigation.
But it's all handled by Next.js
behind the scenes.
What if we want to add some
custom interactive functionality,
written in our own code?
What we're going to do is let our users
change the colours of our pages,
and enable or disable dark mode,
like this Create React App website.
This will be a nice addition
to our blog app.
So how do we go about
implementing this functionality?
Well, for a start
we'll need to show a button
that the user can click
to toggle between dark and light mode.
And we could show that button
in the NavBar.
This is where we display the top links,
so we could add another element here,
after the list.
Let's go and create
a separate React component straight away.
Let's call it "ThemeSwitch",
since it's for switching between
dark and light themes.
This will be a regular
React function component.
And we can start with
a simple "button" element,
saying "Dark Mode".
As always we need to
export the component function.
Now that we have our new component
we can insert it into the NavBar.
Note that the editor automatically added
the right import statement at the top.
Ok, let's see what
this ThemeSwitch looks like.
Right now it's just an unstyled button,
and it's displayed below the links.
Let's add some styles
to put it on the right side.
Our new ThemeSwitch is inside
a "nav" element,
and the "nav" contains two children:
the list of links and the ThemeSwitch.
So to display the button on the right
we could style the "nav" element
to use flexbox.
And this makes the button
show up on the same line as the links,
because the default flow direction is row.
Now we could use "justify-content"
to arrange the children of this element
and if we set this to "space-between"
then it puts all the space
between the list and the button,
so the button ends up on the right.
Now, let's go and style the button itself.
I'll add a fragment around here
so it's easier to insert a "style" element.
And we'll use "styled-jsx" for this
like we did in the NavBar component.
Let's add some rules for the "button".
We want to remove the default "background",
and also the "border".
So that's better.
But if we move the mouse over the button,
there's nothing suggesting
that it's a clickable element.
So let's set the "cursor" style
to "pointer".
And now at least it should show
the pointer on mouse over.
Ok. There's a lot more we could do
in terms of styling
to make this button look nicer,
but I'll keep it simple for this example.
What I want to do now instead
is focus on the functionality.
To be able to switch "darkMode" on and off,
we'll need a variable to keep that state,
and then we could change the button "text"
depending on the current "darkMode" value.
If "darkMode" is true then the button
will switch to "Light Mode",
while if "darkMode" is false
then clicking the button
should enable "Dark Mode".
So that's the "text" we want to
display inside the "button".
And let's go and log the value
of that "darkMode" variable as well,
because this will help us understand
what's going on.
At the moment "darkMode" is set to "false",
so the button says "Dark Mode".
But if we change that variable to "true",
then the button says "Light Mode".
Now, we want to change the value of this variable
when the user clicks on the button.
To do that we can use
the React "useState" hook,
that we need to import of course.
We can pass "false" as the initial value.
And "useState" returns an array,
where our "darkMode" variable
is the first element,
while the second element is a function
that we can use to change the value,
so "setDarkMode".
Now, if we save at this point,
"darkMode" will be set to "false",
as you can see in the browser console.
But now we can add an
"onClick" event handler for the button,
that will be a function
where we call "setDarkMode",
and simply invert the value of "darkMode".
So if "darkMode" is "false"
we'll set it to "true", and vice versa.
Let's see if this works.
We know that "darkMode" is initially false.
Now, if we click the button,
you can see in the Console messages
that "darkMode" becomes "true",
and therefore the button text
changes to "Light Mode".
And if we click again,
of course "darkMode" turns false,
and the text says "Dark Mode" again,
and so on.
It's basically a simple toggle button
with an "on" or "off" state.
What it doesn't yet is
actually change the style of our page.
We'll take care of that in the next video.