File path:
  ./src/app/layout.tsx
- wait compiling...
- error ./src/app/layout.tsx
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

   ,-[/Users/amonden/hitomio/n2-photo-apps_main/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.esm.js:1:1]
 1 | import { computePosition, arrow as arrow$1 } from '@floating-ui/dom';
 2 | export * from '@floating-ui/dom';
 3 | import * as React from 'react';
 4 | import { useLayoutEffect, useEffect } from 'react';
   :                           ^^^^^^^^^
 5 | import * as ReactDOM from 'react-dom';
 6 | 
 7 | var index = typeof document !== 'undefined' ? useLayoutEffect : useEffect;
   `----

The error was caused by importing '@aws-amplify/ui-react/dist/esm/index.mjs' in './src/app/layout.tsx'.

Maybe one of these should be marked as a client entry with "use client":
  ./src/app/layout.tsx

"use client";

import { Amplify } from "aws-amplify";
import awsconfig from "../../aws-exports";
import { ContestCard } from "../../ui-components";

import { withAuthenticator } from "@aws-amplify/ui-react"; // 追加

Amplify.configure(awsconfig);

function Contests() {
  return (
    <>
      <h1>コンテスト１件表示デモ</h1>
      <ContestCard id="" />
    </>
  );
}

export default withAuthenticator(Contests); // 追加

export default withAuthenticator(Contests, {
  components: {
    Header: () => <div>ヘッダーです</div>,
    SignIn: {
      Header: () => <div>SignInヘッダーです</div>,
      Footer: () => <div>SignInフッターです</div>,
    },
    SignUp: {
      Header: () => <div>SignUpヘッダーです</div>,
      Footer: () => <div>SignUpフッターです</div>,
    },
    Footer: () => <div>フッターです</div>,
  },
}); // 認証で追加

export default withAuthenticator(Login, {
  usernameAttributes: "email",
  signUpConfig
});

import { Auth } from 'aws-amplify';

export async function signOut() {
  try {
    await Auth.signOut(); // または Auth.signOut({ global: true });
  } catch (error) {
    console.log('error signing out: ', error);
  }
}