Answer the following questions considering the learning outcomes for this week. Make sure to record evidence of your processes. You can use code snippets, screenshots or any other material to support your answers.
Do not fill in the feedback section. The Founders and Coders team will update this with feedback on your progress.
Dynamic Routing with Next.js
You can change routes dynamically based on user interactions. Here's how it works based on the following snippets:
The file structure is designed to enable dynamic routing based on file and folder names. Here's a breakdown of the key files and folders:
LISTINGS/page.js
: This file represents the main listings page, displaying a list of items that we pass as props to the FilterAndDisplay component.
COMPONENTS/FilterAndDisplay.jsx
: Here we display these items using a mapping function. Each item gets wrapped into a Link component (line 31), which enables navigation to a dynamic route.
<Link href={`/LISTING/${item.id}`}>
{/* Your item display */}
</Link>
LISTING/[ID]/page.js
: In this file we retrieve the dynamic parameter (extracted from the URL) params.id using React's props and we display that specific image
Hooks
In this project I focused only on deployment unfortunately, so I didn' t contribute at all to the rest. Therefore hooks such as useContext, createContext and useReducer are still stranger to me
That is a really detailed walk through of dynamic routes! The abstraction in Next means that dynamic routes can look a little like black magic, but you've stripped down their basic workings here pretty well.
You'd probably find it really useful to narrow down your focus a bit and start off by spiking useEffect()
a bit. Hooks come in all shapes and there are always new custome ones being made but useEffect()
gives you all the basic syntax and will force you to think of scope in a particular way. Once you've got that down you'll see that any hook is much the same tool but perfected for a dedicated use.