CS391 Lecture 12 Next.js Routing

Next.js Routing

How does Next.js routing work?

Next.js uses file-system routing where folders are routes.

How do you create a route from a folder?

To create a route from a folder you need to nest a page.jsx/tsx in that folder.

Where do you export your React components from?

page.jsx/tsx is also where you would export your React components from

Where are page files rendered?

All page.tsx/jsx files are rendered in the layout.tsx/jsx as {children}.

What happens if I add a style in layout.tsx/jsx?

If I add a style in the layout.tsx/jsx it will be applied to all page.tsx/jsx files.

How are Dynamic paths defined in Next.js?

In React you defined your Dynamic paths in the Root() component but In Next.js your Dynamic paths are defined using brackets [ ]

How do you extract your Dynamic [route]?

To extract your Dynamic [route], you still use useParams()

Can Navigation menu be SSR?

In Next.js your Navigation menu can be SSR as well

What can you do on the CSR side?

Then on the CSR you can map over your Links.

What is usePathname()?

usePathname() can change the theme of the active path and is a Next.js hook that is very similar to use useParams(), except that usePathname() is used to get the entire current path rather that extracting part of it.

Benefits of Server-Side API handling

API Key Protection, Field Exposure, Error Handling

Where should most API keys be stored?

For security, it should be stored in the server (Server-Side).

Where should API_KEY be placed?

It should be placed in the root of the server, in an Environment-Variable file (.env).