我正在做一个Next.js 13项目，并实现了一个功能，允许用户根据他们的输入生成图像。图像生成过程由generateImage函数处理，它成功地生成图像并将其存储在图像状态中。
然而，当我试图在图像生成后立即自动将用户重定向到新页面（/display-image）时，我遇到了一个问题。我希望用户能够查看生成的图像，而不必手动触发导航。
我尝试使用next/navigation中的重定向功能来执行导航，但遇到了错误“NextRouter未安装”。
下面是实现的代码块：

import { PageWrapper } from '@/components/Page-Wrapper';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';

export default function Page() {
  const [searchVal, setSearchVal] = useState('');
  const [loading, setLoading] = useState(false);
  const [image, setImage] = useState('');

  async function generateImage(): Promise<any> {
    setLoading(true);
    const response = await fetch(`/api/generate`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        prompt: `${searchVal}`,
      }),
    });
    const data = await response.json();
    setImage(data.url);
    setSearchVal('');
    setLoading(false);
  }

  const router = useRouter();

  useEffect(() => {
    if (image) {
      // Redirect to the new page after generating the image
      router.push(`/display-image?image=${encodeURIComponent(image)}`);
    }
  }, [image, router]);

  return (
    <PageWrapper>
      <div>
        <main className='py-40 px-8 md:px-12 lg:px-24 flex flex-col items-center justify-center'>
          <h1 className='text-center text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight mb-4'>
            Type Your Prompt
          </h1>
          
          <Input
            value={searchVal}
            type='text'
            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
              setSearchVal(event.target.value)
            }
            className='max-w-md shadow focus:ring-zinc-500'
            placeholder='Enter Name Here...'
          />

          <button
            onClick={() => generateImage()}
            className={cn(
              buttonVariants({ variant: 'default' }),
              'flex items-center justify-center py-3 px-6 mt-6 '
            )}
            disabled={loading}
          >
            {loading ? 'Loading...' : 'Create Your Image'}
          </button>

          {image && (
            <div className='mt-8'>
              <Image
                className='w-64 h-64 object-cover rounded-md shadow-lg'
                src={image}
                alt='AI Generated'
                width={500}
                height={500}
              />
            </div>
          )}
        </main>
      </div>
    </PageWrapper>
  );
}

字符集
我怀疑这个问题可能与Next.js 13如何处理路由和页面转换有关。我正在寻求如何正确实现在Next.js 13中成功生成图像后自动重定向到/display-image页面的指导。如有任何帮助，我们将不胜感激。谢谢你，谢谢