NDEFReader in Next.JS Client Component

142 Views Asked by At

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?

0

There are 0 best solutions below