I'm working on a Next.js project where I'm trying to interact with a smart contract using ethers.js. I want to import the contract's ABI from a JSON artifact file generated by Hardhat, and use it to instantiate a new ethers.js Contract object.

Here's the relevant code:

''ts

import { Wallet, ethers } from "ethers";
import ContractArtifact from "./path/to/Contract.json";

const ContractABI = ContractArtifact.abi;
console.log(ContractABI); // This will print the ABI to the console

// Later in the code...
const contract = new ethers.Contract(
"YOUR_CONTRACT_ADDRESS", // Replace with your contract's address
ContractABI,
provider
);

However, when I run my application, I get a module not found error for the Contract import:

Module not found: Can't resolve './path/to/Contract.json'

The directory containing the contract artifact is located inside the root directory of my Next.js project, and the path in the import statement is relative to the file where the import statement is located.

I've verified that the Contract.json file exists at the specified path and that the casing in the import statement matches the casing of the actual file and directory names.

My best guess is that there's an issue with the way Next.js or TypeScript is resolving the import path, but I'm not sure how to resolve it. Any help would be greatly appreciated. Thank you!