Next.js Discord

Discord Forum

Hydration error because of nesting <Link> Tag inside a <Link>

Answered
Galician Shepherd Dog posted this in #help-forum
Open in Discord
Galician Shepherd DogOP
when I comment the link, it works perfectly
{results.map((file) => (
            <div key={file.id} className="border rounded-lg shadow-sm">
              <Link href={`/savco-magazines/${file.uid}`}>
                <Image
                  src={file.data.file_image.url!}
                  alt={`Cover for ${file.data.file_image.alt}`}
                  width={file.data.file_image.dimensions?.width}
                  height={file.data.file_image.dimensions?.height}
                  className="w-full bg-cover"
                />
                <div className="p-4 overflow-auto">
                  <h3 className="font-semibold text-lg mb-2">
                    {file.data.file_name}
                  </h3>
                  <p className="text-gray-600 mb-4">
                    {file.data.file_brief_description}
                  </p>
                  {/* <Link
                    passHref={true}
                    href={`/scientific-magazines/${file.uid}`}
                    className="block text-small text-blue-400 hover:underline py-2"
                  >
                    {t("read")}
                  </Link> */}
                  {(file.data.file as LinkType).url && (
                    <Link
                      prefetch={false}
                      href={(file.data.file as LinkType).url}
                    >
                      <div className="inline-block bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700 transition duration-300">
                        {t("download")}
                      </div>
                    </Link>
                  )}
                </div>
              </Link>
            </div>
          ))}
typescript
Answered by joulev
you must restructure your component so that there are no instances of <a> nesting inside <a>
View full answer

4 Replies