refactor: change all useSearchParams for static generation to use SearchParamsLoader

src/app/(auth)/login/_components/login-query-param-snackbar/index.tsx

@@ -1,21 +1,23 @@
 'use client'
 
-import { useSearchParams } from 'next/navigation'
-import { useEffect } from 'react'
+import { ReadonlyURLSearchParams } from 'next/navigation'
+import { useEffect, useState } from 'react'
 import { useSnackbarsStore } from '@/app/_components/snackbars/use-snackbars-store'
+import { SearchParamsLoader } from '@/components/search-params-loader'
 import { useQueryParams } from '@/utils/query-param/use-query-params'
 
 export function LoginQueryParamSnackbar() {
-  const searchParams = useSearchParams()
-  const error = searchParams.get('err')
-  const isAccountConfirmationSuccessful = searchParams.get(
+  const [searchParams, setSearchParams] =
+    useState<ReadonlyURLSearchParams | null>(null)
+  const error = searchParams?.get('err')
+  const isAccountConfirmationSuccessful = searchParams?.get(
     'account_confirmation_success',
   )
   const openSnackbar = useSnackbarsStore((state) => state.openSnackbar)
-  const { cleanupQueryParams } = useQueryParams()
+  const { cleanupQueryParams } = useQueryParams({ searchParams })
 
   useEffect(() => {
-    if (searchParams.toString()) {
+    if (searchParams?.toString()) {
       if (isAccountConfirmationSuccessful === 'true') {
         openSnackbar({
           severity: 'success',
@@ -42,5 +44,5 @@ export function LoginQueryParamSnackbar() {
     cleanupQueryParams,
   ])
 
-  return null
+  return <SearchParamsLoader onParamsReceived={setSearchParams} />
 }

src/app/(auth)/login/page.tsx

@@ -1,5 +1,4 @@
 import Link from 'next/link'
-import { Suspense } from 'react'
 import { AuthHeading } from '@/components/headings/auth-heading'
 import { HorizontalRule } from '@/components/horizontal-rule'
 import { SocialLoginForms } from '@/components/social-login-forms'
@@ -25,9 +24,7 @@ export default function Login() {
           アカウントを新規作成
         </Link>
       </div>
-      <Suspense>
-        <LoginQueryParamSnackbar />
-      </Suspense>
+      <LoginQueryParamSnackbar />
     </>
   )
 }

src/app/(auth)/password/forgot/_components/forgot-password-query-param-snackbar/index.tsx

@@ -1,18 +1,20 @@
 'use client'
 
-import { useSearchParams } from 'next/navigation'
-import { useEffect } from 'react'
+import { ReadonlyURLSearchParams } from 'next/navigation'
+import { useEffect, useState } from 'react'
 import { useSnackbarsStore } from '@/app/_components/snackbars/use-snackbars-store'
+import { SearchParamsLoader } from '@/components/search-params-loader'
 import { useQueryParams } from '@/utils/query-param/use-query-params'
 
 export function ForgotPasswordQueryParamSnackbar() {
-  const searchParams = useSearchParams()
-  const error = searchParams.get('err')
+  const [searchParams, setSearchParams] =
+    useState<ReadonlyURLSearchParams | null>(null)
+  const error = searchParams?.get('err')
   const openSnackbar = useSnackbarsStore((state) => state.openSnackbar)
-  const { cleanupQueryParams } = useQueryParams()
+  const { cleanupQueryParams } = useQueryParams({ searchParams })
 
   useEffect(() => {
-    if (error !== null) {
+    if (searchParams !== null && error !== null) {
       if (error === 'token_not_found') {
         openSnackbar({
           severity: 'error',
@@ -29,5 +31,5 @@ export function ForgotPasswordQueryParamSnackbar() {
     }
   }, [searchParams, error, openSnackbar, cleanupQueryParams])
 
-  return null
+  return <SearchParamsLoader onParamsReceived={setSearchParams} />
 }

src/app/(auth)/password/forgot/page.tsx

@@ -1,5 +1,4 @@
 import Link from 'next/link'
-import { Suspense } from 'react'
 import { AuthHeading } from '@/components/headings/auth-heading'
 import { ForgotPasswordQueryParamSnackbar } from './_components/forgot-password-query-param-snackbar'
 import { RequestResetPasswordEmailForm } from './_components/request-reset-password-email-form'
@@ -19,9 +18,7 @@ export default function ForgotPassword() {
           ログイン画面へ
         </Link>
       </div>
-      <Suspense>
-        <ForgotPasswordQueryParamSnackbar />
-      </Suspense>
+      <ForgotPasswordQueryParamSnackbar />
     </>
   )
 }

src/components/pages/account-page/account-query-param-snackbar/index.tsx

@@ -1,18 +1,20 @@
 'use client'
 
-import { useSearchParams } from 'next/navigation'
-import { useEffect } from 'react'
+import { ReadonlyURLSearchParams } from 'next/navigation'
+import { useEffect, useState } from 'react'
 import { useSnackbarsStore } from '@/app/_components/snackbars/use-snackbars-store'
+import { SearchParamsLoader } from '@/components/search-params-loader'
 import { useQueryParams } from '@/utils/query-param/use-query-params'
 
 export function AccountQueryParamSnackbar() {
-  const searchParams = useSearchParams()
-  const accountConfSuccess = searchParams.get('account_confirmation_success')
+  const [searchParams, setSearchParams] =
+    useState<ReadonlyURLSearchParams | null>(null)
+  const accountConfSuccess = searchParams?.get('account_confirmation_success')
   const openSnackbar = useSnackbarsStore((state) => state.openSnackbar)
-  const { cleanupQueryParams } = useQueryParams()
+  const { cleanupQueryParams } = useQueryParams({ searchParams })
 
   useEffect(() => {
-    if (searchParams.toString()) {
+    if (searchParams?.toString()) {
       if (accountConfSuccess === 'true') {
         openSnackbar({
           severity: 'success',
@@ -28,5 +30,5 @@ export function AccountQueryParamSnackbar() {
     }
   }, [accountConfSuccess, openSnackbar, cleanupQueryParams, searchParams])
 
-  return null
+  return <SearchParamsLoader onParamsReceived={setSearchParams} />
 }

src/components/pages/account-page/current-user-info/current-user-change-password-form-show-button/change-password-form-show-button/use-change-password-form-show-button.tsx

@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useRouter } from 'next/navigation'
+import { useRouter, useSearchParams } from 'next/navigation'
 import { useRef, useState, useCallback } from 'react'
 import { useForm } from 'react-hook-form'
 import { z } from 'zod'
@@ -19,12 +19,13 @@ type Params = {
 }
 
 export function useChangePasswordFormShowButton({ email }: Params) {
+  const searchParams = useSearchParams()
   const contentRef = useRef<HTMLDivElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
   const [isShown, setIsShown] = useState(false)
   const [isSending, setIsSending] = useState(false)
   const router = useRouter()
-  const redirectLoginPath = useRedirectLoginPath()
+  const redirectLoginPath = useRedirectLoginPath({ searchParams })
   const openSnackbar = useSnackbarsStore((store) => store.openSnackbar)
   const { openErrorSnackbar } = useErrorSnackbar()
 

src/components/pages/account-page/current-user-info/editable-avatar/avatar-editor/use-avatar-editor.tsx

@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useRouter } from 'next/navigation'
+import { useRouter, useSearchParams } from 'next/navigation'
 import { useState, useRef } from 'react'
 import { useForm } from 'react-hook-form'
 import { useErrorSnackbar } from '@/app/_components/snackbars/snackbar/use-error-snackbar'
@@ -17,7 +17,8 @@ export function useAvatarEditor() {
   const inputRef = useRef<HTMLInputElement | null>(null)
   const { openErrorSnackbar } = useErrorSnackbar()
   const router = useRouter()
-  const redirectLoginPath = useRedirectLoginPath()
+  const searchParams = useSearchParams()
+  const redirectLoginPath = useRedirectLoginPath({ searchParams })
   const [isDeletingAvatar, setIsDeletingAvatar] = useState(false)
   const {
     register,

src/components/pages/account-page/current-user-info/editable-bio/bio-editor/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useRouter } from 'next/navigation'
+import { useRouter, useSearchParams } from 'next/navigation'
 import { useRef } from 'react'
 import { z } from 'zod'
 import { useErrorSnackbar } from '@/app/_components/snackbars/snackbar/use-error-snackbar'
@@ -43,7 +43,8 @@ export function BioEditor({
   children,
 }: Props) {
   const router = useRouter()
-  const redirectLoginPath = useRedirectLoginPath()
+  const searchParams = useSearchParams()
+  const redirectLoginPath = useRedirectLoginPath({ searchParams })
   const editorRef = useRef<HTMLTextAreaElement>(null)
   const {
     isEditorOpen,

src/components/pages/account-page/current-user-info/editable-email/email-editor/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useRouter } from 'next/navigation'
+import { useRouter, useSearchParams } from 'next/navigation'
 import React, { useRef } from 'react'
 import { useErrorSnackbar } from '@/app/_components/snackbars/snackbar/use-error-snackbar'
 import { useSnackbarsStore } from '@/app/_components/snackbars/use-snackbars-store'
@@ -40,7 +40,8 @@ export function EmailEditor({
   const openSnackbar = useSnackbarsStore((state) => state.openSnackbar)
   const { openErrorSnackbar } = useErrorSnackbar()
   const router = useRouter()
-  const redirectLoginPath = useRedirectLoginPath()
+  const searchParams = useSearchParams()
+  const redirectLoginPath = useRedirectLoginPath({ searchParams })
   const editorRef = useRef<HTMLInputElement>(null)
 
   const {

src/components/pages/account-page/current-user-info/editable-name/name-editor/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useRouter } from 'next/navigation'
+import { useRouter, useSearchParams } from 'next/navigation'
 import { useRef } from 'react'
 import { useErrorSnackbar } from '@/app/_components/snackbars/snackbar/use-error-snackbar'
 import { EditableText } from '@/components/editable-text'
@@ -35,7 +35,8 @@ export function NameEditor({
 }: Props) {
   const { openErrorSnackbar } = useErrorSnackbar()
   const router = useRouter()
-  const redirectLoginPath = useRedirectLoginPath()
+  const searchParams = useSearchParams()
+  const redirectLoginPath = useRedirectLoginPath({ searchParams })
   const editorRef = useRef<HTMLInputElement>(null)
   const {
     updateField,

src/components/pages/account-page/current-user-info/private-mode-switch/private-mode-checkbox/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useRouter } from 'next/navigation'
+import { useRouter, useSearchParams } from 'next/navigation'
 import { useState } from 'react'
 import { useErrorSnackbar } from '@/app/_components/snackbars/snackbar/use-error-snackbar'
 import { Checkbox } from '@/components/form-controls/checkbox'
@@ -23,7 +23,8 @@ export function PrivateModeCheckbox({
 }: PrivateModeSwitchProps) {
   const { openErrorSnackbar } = useErrorSnackbar()
   const router = useRouter()
-  const redirectLoginPath = useRedirectLoginPath()
+  const searchParams = useSearchParams()
+  const redirectLoginPath = useRedirectLoginPath({ searchParams })
   const [isChangingIsPrivate, setIsChangingIsPrivate] = useState(false)
 
   const handleKeyDown = (ev: React.KeyboardEvent<HTMLLabelElement>) => {

src/components/pages/account-page/delete-current-user-account-button/delete-account-button/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { XMarkIcon } from '@heroicons/react/24/solid'
-import { useRouter } from 'next/navigation'
+import { useRouter, useSearchParams } from 'next/navigation'
 import { useId, useState } from 'react'
 import { useErrorSnackbar } from '@/app/_components/snackbars/snackbar/use-error-snackbar'
 import { Button } from '@/components/buttons/button'
@@ -21,7 +21,8 @@ type Props = {
 export function DeleteAccountButton({ currentUserId }: Props) {
   const router = useRouter()
   const id = useId()
-  const redirectLoginPath = useRedirectLoginPath()
+  const searchParams = useSearchParams()
+  const redirectLoginPath = useRedirectLoginPath({ searchParams })
   const [isDeletingAccount, setIsDeletingAccount] = useState(false)
   const { openErrorSnackbar } = useErrorSnackbar()
   const {

src/components/pages/account-page/index.tsx

@@ -13,15 +13,11 @@ export function AccountPage() {
     <div className="flex flex-col gap-y-10">
       <CurrentUserInfo />
       <HorizontalRule />
-      <Suspense>
-        <LogoutButton />
-      </Suspense>
+      <LogoutButton />
       <Suspense fallback={<LoadingDeleteCurrentUserAccountButton />}>
         <DeleteCurrentUserAccountButton />
       </Suspense>
-      <Suspense>
-        <AccountQueryParamSnackbar />
-      </Suspense>
+      <AccountQueryParamSnackbar />
     </div>
   )
 }

src/components/pages/account-page/logout-button/index.tsx

@@ -1,17 +1,21 @@
 'use client'
 
-import { useRouter } from 'next/navigation'
-import { useId, useState } from 'react'
+import { ReadonlyURLSearchParams, useRouter } from 'next/navigation'
+import { useId, useRef, useState } from 'react'
 import { useErrorSnackbar } from '@/app/_components/snackbars/snackbar/use-error-snackbar'
 import { Button } from '@/components/buttons/button'
+import { SearchParamsLoader } from '@/components/search-params-loader'
 import { useRedirectLoginPath } from '@/utils/login-path/use-redirect-login-path'
 import { logout } from './logout.api'
 
 export function LogoutButton() {
-  const router = useRouter()
-  const id = useId()
-  const redirectLoginPath = useRedirectLoginPath()
+  const searchParams = useRef<ReadonlyURLSearchParams>(null)
   const [isLoggingOut, setIsLoggingOut] = useState(false)
+  const redirectLoginPath = useRedirectLoginPath({
+    searchParams: searchParams.current,
+  })
+  const id = useId()
+  const router = useRouter()
   const { openErrorSnackbar } = useErrorSnackbar()
 
   const handleClick = async () => {
@@ -30,16 +34,23 @@ export function LogoutButton() {
     setIsLoggingOut(false)
   }
 
+  const handleParamsReceived = (params: ReadonlyURLSearchParams) => {
+    searchParams.current = params
+  }
+
   return (
     // 'id' is used to manage popstate events in AccountModal.
-    <Button
-      id={`${id}-logout-button`}
-      type="button"
-      className="btn-outline-danger"
-      status={isLoggingOut ? 'pending' : 'idle'}
-      onClick={handleClick}
-    >
-      ログアウト
-    </Button>
+    <>
+      <Button
+        id={`${id}-logout-button`}
+        type="button"
+        className="btn-outline-danger"
+        status={isLoggingOut ? 'pending' : 'idle'}
+        onClick={handleClick}
+      >
+        ログアウト
+      </Button>
+      <SearchParamsLoader onParamsReceived={handleParamsReceived} />
+    </>
   )
 }

src/utils/login-path/use-redirect-login-path.tsx

@@ -1,11 +1,12 @@
-import { useSearchParams, usePathname } from 'next/navigation'
+import { usePathname, ReadonlyURLSearchParams } from 'next/navigation'
 import { generateFromUrlParam } from './generate-from-url-param'
 
-export function useRedirectLoginPath() {
-  const searchParams = useSearchParams()
-
+type Params = {
+  searchParams: ReadonlyURLSearchParams | null
+}
+export function useRedirectLoginPath({ searchParams }: Params) {
   const pathname = usePathname()
-  const params = searchParams.toString()
+  const params = searchParams?.toString() ?? null
 
   const fromUrl = generateFromUrlParam(pathname, params)
   return `/login?${fromUrl}&err='unauthorized'`

src/utils/query-param/use-query-params.tsx

@@ -1,13 +1,16 @@
-import { usePathname, useSearchParams } from 'next/navigation'
+import { ReadonlyURLSearchParams, usePathname } from 'next/navigation'
 import { useCallback } from 'react'
 
-export function useQueryParams() {
+type Params = {
+  searchParams: ReadonlyURLSearchParams | null
+}
+
+export function useQueryParams({ searchParams }: Params) {
   const pathname = usePathname()
-  const searchParams = useSearchParams()
 
   const cleanupQueryParams = useCallback(
     (keys: string[]) => {
-      const params = new URLSearchParams(searchParams.toString())
+      const params = new URLSearchParams(searchParams?.toString())
       keys.forEach((key) => {
         params.delete(key)
       })