I am trying to use the NDEFReader write function as listed in the mdn web docs here in a Next.js client component. On form submit I have a function which requires the user to scan the NFC tag with an updated URL.
My code for this is below but every time I test it on Chrome in Android it never initialises the NDEFReader and always fails
'use client';
export default function Claimtag({tag}) {
.....
const submit = async (e) => {
e.preventDefault();
var newAuth = (Math.random() * 10).toString(36).replace('.', '').toUpperCase();
console.log(newAuth)
try {
var url = process.env.SELF + `/scan?serial=${tag.serial}&auth=${newAuth}`;
const ndef = new window.NDEFReader();
await ndef.write({
records: [{ recordType: "url", data: url }]
});
console.log("Write complete");
} catch {
console.log("Write failed.");
};
}
return (
<form onSubmit={submit}>
.....
<input type="submit" value="Save" />
</form>
)
}
Has anyone got this working in Next.js 13 using the App directory?