For this experience, you’ll go through the Learn Nextjs Chapter 1 and create a GitHub repo that contains your copy of this system.
Pedagogy Alert!
If you just copy and paste the code without trying to understand what it does, you will not accomplish the goal of this assignment. For each section, make sure you understand all of the code. If you don't understand it, then post a message to the #smart-questions Discord channel with your question.
Nextjs.org recommends using pnpm instead of npm. You can use it if you wish or stick with npm. If you stick with npm, you can ignore the pnpm commands in the tutorial. You’ll need to change the npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm command to npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example".
pnpm i becomes npm install.pnpm dev becomes npm run dev.The tutorial will create a directory structure that looks like this:
app/
lib/
ui/
public/
scripts/
next.config.js
...
The nextjs-application-template has a similar structure. We’ve changed the ui directory to components.
In the nextjs-appliction-template, we use Bootstrap instead of Tailwind CSS. Their suggestion of using a global.css file is a good one. You can ignore the Tailwind CSS instructions, but it is a good idea to become familiar with multple CSS frameworks. We will be using Bootstrap in this class.
Understanding the className attribute is important. It is used to apply CSS classes to elements. You can use it to apply Bootstrap classes to elements.
We won’t be using clsx so you can ignore that part of the tutorial.
We won’t be focusing on optimizing fonts and images in this class. You can skip this chapter. However, it is a good thing to learn about if you want to create a production app that doesn’t look like a student project.
This is an important chapter. You’ll learn how to create a layout that is used by multiple pages. This is a key concept in Nextjs. Focus on the nested routing part of this chapter. This is a key concept in Nextjs.
This is the last chapter you need to complete. You’ll learn how to create links between pages.
By the time and date indicated on the Schedule page, submit this assignment via Laulima.
Your submission should contain:
You will receive full credit for this experience as long as you have submitted the text on Laulima with all required data before the due date.