And that's now it for this section.
In this section, we had a in-depth look into NextJS
using this App Router
and you learned how you can set up routes
by using the file system instead of app
and by using these special file names
like page.js and layout.js.
You also learned about other special files
like error.js for handling errors,
or not-found.js for handling not found errors,
or the loading js file, which I'm not using here,
but which we used temporarily
to show some loading state on the screen.
Though you learned that you have more granular control
by using suspense, which is what we then did.
Now you also learned how to configure dynamic routes
where some path segments aren't known in advance,
like here, where we load pages for individual meals,
where we don't know in advance how many meals we'll have
and most importantly, you learned that all those pages
in the end just export standard React components,
but that those components
are kind of special when using NextJS.
That they are server components
that are executed on the server,
that are rendered on the server, therefore.
And it's not just those page components,
but instead all components
unless you explicitly opt out of this behavior
by adding this use client directive to convert a file
and its components into a client component,
which then is rendered on the client and which then
therefore may use client side functionality like useState
or handling user events.
You therefore also learned that you can take advantage
of those Server components by fetching data directly
inside of those components.
There is no need to use user effect
and send requests to separate backends.
Instead, you can fetch the data from right
inside your Server components.
And you can just fetch the data,
you also learned about Server Actions, async functions
that either have to use Server directive inside of them
or that are stored in a file with used Server at the top.
And the special thing about those Server Actions is
that you can assign them as values to the action prop
on form elements, either directly
or as we're doing it here with help of useFormState,
which is a hook provided by react-dom
to handle responses returned by the Server action function
and then potentially update the UI based on those responses.
Like here where we are conditionally
showing an error message.
Speaking of updating the UI based on Server Actions,
you also learned about the useFormStatus hook,
which can be used to find out whether a form
is currently being submitted
or not, which can then be used to update the UI accordingly.
Now, related to all of that, you also learned
that NextJS does some pretty aggressive caching
and that therefore you should call revalidatePath
whenever you change some data to make sure
that the latest data is fetched
and represented on your pages.
And you also saw that it can be dangerous
if you never test your app in production mode
because everything worked in development mode
in our app here,
but then suddenly the data was missing in production mode.
So this is an important function
and an important concept to understand in general.
Now, last but not least, we also talked about metadata
that can be added to pages, static metadata
as we have it here or dynamically generated metadata.
And therefore at this point you
have a super solid NextJS foundation
and you are ready to use NextJS
with its App Router in your future projects.