Topics for the final exam

The final exam will focus on Next.js. Since Next.js includes React and traditional JavaScript, you will need to know those topics as well.

The final exam will not cover database interactions. If a problem I give on the exam requires some sort of database interaction I will provide you with a function that you can call that will do the interaction for you.

Specific topics

Here are some specific things you should be able to do.

• Write HTML for a component.
• Use the JavaScript map() and filter() methods.
• Distinguish between client and server components.
• Work with props in components, including using TypeScript to specify types for your props.
• Work with state variables in client components.
• Work with cookies.
• Read a path parameter in a Next.js app route.
• Set up a form in Next.js.
• Write an server action function for a form or a button.
• Use a redirect.

Client vs server components

An important distinction you should be able to make is deciding whether to make a component a server component or a client component. The most important rules you need to know to make this decision are

• If the component needs to read data from a database it has to be a server component.
• If the component includes a button it must be a client component.
• If an action for a button or form needs to communicate with the database, that action function must be a server action.
• You can only access cookies in a server component or a server action.

A common problem you will encounter is components that need to both read data from a database and offer the user buttons to click. The correct way to structure these components is to break them up into two components, an outer server component and an inner client component:

• The outer component handles getting path parameters and reading values from cookies, and then calls one or more database functions to fetch data.
• The outer component returns some HTML, including an inner client component.
• The outer component passes the inner client component everything it needs to do its job via props.
• The inner component is a pure client component, which enables it to use state variables if needed. The inner component can use buttons and forms as needed.
• The actions that the client component needs can be server actions: those actions are free to access the database, work with cookies, and do redirects.