Rendering Dates in Next.js

This is the easiest way to display a date, but will be in the timezone of the server, not the user. Sometimes this is what you want, but often you want the date to be in the user's timezone.

This is the first solution developers may turn too. It renders the date in to a string on the server, in the servers timezone. Then, when it hydrates on the client, it uses the clients timezone to render in local time. This causes the dreaded hydration mismatch error.

This works great, if and only if, the date isn't coming from the server. If you're going to fetch the datetime client side then this is fine, or if the user is say entering a calendar input, then this is perfectly fine. Because the client is responsible for generating and displaying the date in the users timezone.

This is 'the solution' to have the date generated / fetched on the server, but then rendered in the client's timezone. In the initial render, the server displays a loading message (a loading skeleton would look good). Then when the client hydrates, it renders the date in the users timezone.

An implementation of the above solution as a reusable component.