Does Frontier support NextJS?2 min read

Short answer: Yes!

Long answer:

NextJS is an extremely popular framework for ReactJS that provides quite a few benefits, one of which is the mix between server and client-side components. 

Understanding Next.js Components:

• Server-only Components: These components are rendered exclusively on the server and do not rely on state or any client-side APIs. They can securely fetch data from external APIs without exposing credentials to the client (and without worrying about credentials falling into the wrong hands). Server components cannot contain client-side code, such as event handlers or state management, and are intended to generate static HTML that is sent to the client. These components can include other server components or client components as children.

• Client Components: These components require the "use client" directive at the top of the file. They utilize client-side features such as state, effects, or event handling, which necessitates rendering in the browser. Client components can also include other client or server components as children. However, not all client components need to manage state; the key is that they rely on React features that are only available on the client side.

In Next.js, components are server components. This ensures that fully-formed HTML is sent to the user on page load. It’s up to the developer’s discretion to set the client boundaries. If components are not using state and are not making outward API calls, they can be implemented both as client and server, which is ideal. 

Since it can be quite complex to determine, which type of component a particular React component is (Server only, Client only, agnostic), Frontier will generate client components by default, when it detects NextJS. This is done by adding the ‘use-client’ statement at the beginning of the component declaration. 

This issue arises because it can be challenging to identify if the rendered component tree includes descendants that must be rendered on the client side. Without a ‘use client’ directive for those components, runtime errors may occur.

If you remove the ‘use-client’ and the code still builds with no errors, this means that the client boundaries have been set correctly, and you can let Next.js determine whether the component is rendered on the client or the server. If, on the other hand, removing it causes a build error, it means that one or more of the descendants uses client-only APIs, but hasn’t declared itself as a client component. In this case, you can add the ‘use-client’ statement in the code we’ve created, or add the directive directly inside of the offending descendant.

So, what’s the bottom line?

Short answer: Yes, Frontier supports NextJS!

Start here!