Add "use client" to client-side components

[filiphsps]

When importing createStorefrontClient in the following way

import { createStorefrontClient } from '@shopify/hydrogen-react';

We also indirectly import a bunch of other components such the AddToCartButton, BuyNowButton, which results in createStorefrontClient being unusable in the new nextjs app router.

A simple work-around for this would be to add "use client" to the top of all files containing client-side components.

nextjs error

ReactServerComponentsError:

You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
Learn more: https://nextjs.org/docs/getting-started/react-essentials

   ,-[/home/filiphsandstrom/[project]/node_modules/@shopify/hydrogen-react/dist/node-dev/AddToCartButton.mjs:1:1]
 1 | import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 2 | import { useState, useEffect, useCallback } from "react";
   :                    ^^^^^^^^^
 3 | import { useCart } from "./CartProvider.mjs";
 4 | import { useProduct } from "./ProductProvider.mjs";
 5 | import { BaseButton } from "./BaseButton.mjs";
   `----

The error was caused by importing '@shopify/hydrogen-react/dist/node-dev/index.mjs' in './src/api/shopify.ts'.

[blittle]

I think this is a duplicate of #867