When using the node.js sharp library on Windows and you encounter this error while trying run your app.

Use:

npm install --force @img/sharp-win32-x64

It's worth noting that using --force should be done cautiously. It might be necessary in some situations, but it can potentially lead to problems if there are compatibility issues or conflicts between packages.

It's usually better to understand and resolve the root cause of any installation issues rather than relying on the --force flag.

The solution is to create your date(s) inside useEffect. Now only the client computes the new date and updates the DOM.

Here is were you can get a fresh JWT secret from Vercel: https://generate-secret.vercel.app/32

Replace router with navigation

import { useRouter } from 'next/router';
import { usePathname } from "next/navigation";

We also need to replace useRouter with usePathname

const router = useRouter();
const pathname = usePathname();

And when using as a link remove router

className={router.pathname == "/" ? "active" : ""}
className={pathname == "/" ? "active" : ""}

I know in Next.js, you can create dynamic routes using square brackets "[]". But what name do I use in the brackets?

wp.data.select( 'core/edit-post' ).getPreferences().panels;

I found the trick is to nest client side components in server side components.

Use server side components as the outer frame of the UI and nest interactive client side components inside.

This will create a server side layout to pass down all the properties you need to the client side component.

So for example you could use the UI wireframes to visualize all the server side components like header or nav and sidebar and main. From there any time you need a new client side you can import it into the parent server component.

This will create a hierarchy Like

page (server side)
-components
--TopicList (server side)
---TopicListItem (client side)

As you can see here this keep all the client side elements to a minimum.