Now for this section,
I prepared a brand new demo project.
You'll find it attached, of course.
You just need to run npm install in that attached project
after you've downloaded it and extracted it
to install all the project dependencies.
And then once you did that, run npm run dev
to start that NextJS Development Server.
Now in that project I provided to you,
you'll find a couple of folders and files,
and you, of course, already know
this General NextJS project structure
because as I mentioned, I do assume that you finished
that NextJS Essentials module.
So I will not reintroduce you to this structure.
Instead, in this starting project,
you'll note that we have a fairly trivial app folder,
which in the end only contains an icon.jpg file,
which, well, is the favicon that is shown for this page.
And as you learned,
if you have a file named icon.jpg in the app folder,
it will automatically be used by NextJS
as a favicon for this page.
You have a globals.css file with some styles
that we'll use throughout this section.
Obviously, you can change those if you wanna tweak the look
of this demo application.
And we got a very basic layout, which sets up some metadata
and then a very basic shell for our pages.
And then a very simple page.js file for the homepage.
Nothing too fancy.
And therefore, if you visit local host 3000,
you should see this on the screen.
And now I got a little challenge, a little exercise for you
to practice what you already learned earlier in this course,
because I want you to use your existing NextJS knowledge
to add two new pages to this starting application
I provided to you.
You should add a /news page,
so which can be visited if you enter local host 3000/news,
which shows a list of dummy news items.
Because the dummy app we're going to build in this section
is a fictional, very simple news site.
So I want you to show a list of news items
which can be clicked.
So these items should be links.
And these links should take you to a news detail page,
which is /news/ and then some ID, some identifier
of a specific news item.
Now at this point here,
we, of course, don't have any real data to work with yet.
So you can simply output some dummy links
that lead to any news with any idea of your choice.
And then just always show the same details page
for the news item that is loaded.
We don't need any real data yet.
As a little bonus, though,
you can try to extract that identifier
that will be encoded in the URL of that news item page
and output it on that news item page
just so that you use your knowledge
about extracting that encoded URL data.
That's a little bonus, but the main task is to have
these two pages that link to each other.
And then there also is another task for you
because I also want you to add a main header component,
a separate component that you should build,
add it to this website.
And in that header, you should have two links,
one leading to the starting page, the homepage,
and the other one leading to that news page.
That's my task for you.
We'll build this together in the next lecture.