Max Next – Section 4 – Project Time: Working with File-based Routing


Updated Jul 15th, 2021

Some good nuggets of info in here including:

Assets in the public folder are automatically available with no config like in express. Reference the files via a single slash and drop the “/public/” prefix as it’s not necessary.

The “.toLocaleDateString()” method chained to a new date object is a good way to convert dates into more “human readable” dates. See docs for configuration details.

new Date(date).toLocaleDateString('en-us', {
  day: "numeric",
  month: "long",
  year: "numeric",

When you need to convert addresses from a string on one line to multiline based on commas use the “replace()” method

const formattedAddress = location.replace(', ', '\n')

// note the "comma space"
// where location is a comma separated address

Can reference globally-defined styles in component files with the className set to a string (no curly brackets) instead of {styles.yourClass} (Project uses built-in CSS Modules)

If you need to add classes to an anchor tag when using next Link then add the anchor with className but leave the href on the Link. NextJS will disregard the anchor tag but honor the classes. seems like a good way to bring in icon components without installing a package or using a cdn. Store these icon components, “.js,” files in a components/icons folder to stay organized and to use just import and reference throughout your code. Copy JSX code from the site or svg code. Unclear whether you create the comps using the code or you can download.

Can pass a function as props just reference don’t execute.

Fragment is imported from ‘react’ and used quite a bit as it’s “needed if you have adjacent JSX elements.” A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM. Good article here about why to use Fragment over the standard div. Basically though, it’s the same thing but you don’t actually add a div to the DOM.

In the Layout.js component file he has a MainHeader comp and underneath that wraps {props.children} in main tags. Maybe this main tag is what I’m missing to hide all content besides menu on menu open?

shorthand to convert string to a number is to add a plus sign in front the variable that stores the string.