1
resposta

Na pasta src/component/Link/index.ts o sistema não está entendendo ele como um arquivo em Next.js

Pra solucionar tive de renomear ele para index.tsx, onde posso configurar para esse componente .ts seja entendido como um "item" do Next?

1 resposta

Oi Luiz Henrique, tudo bem?

Desculpe a demora em retornar.

Entendo que você está enfrentando um problema ao tentar utilizar o componente Link do Next.js em um arquivo .ts, certo? Na verdade, esse problema ocorre porque o Next.js só suporta arquivos com a extensão .tsx para componentes que possuem JSX ou TSX dentro deles.

No entanto, você pode resolver isso facilmente, como você mencionou, renomeando o arquivo para index.tsx. Dessa forma, o Next.js irá entender que se trata de um componente que contém JSX e permitirá o seu uso.

Se você realmente precisa utilizar o arquivo com a extensão .ts, pode criar um alias no seu arquivo tsconfig.json apontando para a extensão .tsx. Isso fará com que o TypeScript entenda que um arquivo .ts pode conter código JSX e, assim, permitirá a sua utilização no Next.js. Basta adicionar o seguinte trecho de código no arquivo tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "components/*": ["src/components/*"],
      "*.tsx": ["*.ts"]
    },
    "jsx": "react-jsx"
  }
}

Note que o alias ".tsx": [".ts"] é o responsável por fazer com que o TypeScript entenda que um arquivo .ts pode conter código JSX.

Espero que tenha te ajudado.

Um abraço e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software