Next.jsでXMLを読み込む

やりたいこととしては、Next.jsのクライアントサイドのコード上でXMLを読み込んでパースしたい。

試しにこのXMLファイルをNext.jsで読み込んでみる。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<config>
    <hoge>xml sample</hoge>
</config>

理想としてはこんな感じでコンポーネント内で使えると嬉しい。jsonなら簡単なのだが。

import CONFIG from 'config.xml'

const Component = () => <>{CONFIG.hoge}</>

kwst

ざっと調べたけど/public配下に置いてGETリクエストする例が多い。

kwst

GETリクエストで取得したのちこれでパースする方法を取る。

kwst

こんな感じでGETで取得してきたXMLをパースできる。

const res = await fetch('/mock-data/sample.xml')
const text = await res.text()
const parser = new XMLParser()
const jObj = parser.parse(text)
console.log('jObj', jObj)

こんな感じのオブジェクトになる。

{"?xml":"","config":{"hoge":"xml sample"}}

kwst

せっかくなのでカスタムフックにしてみた。

import { XMLParser } from 'fast-xml-parser'
import { useEffect, useState } from 'react'

const useGetXml = () => {
  const [xmlData, setXmlData] = useState()

  useEffect(() => {
    ;(async () => {
      // モックデータの取得
      const res = await fetch('/mock-data/sample.xml')
      const text = await res.text()
      const parser = new XMLParser()
      const jObj = parser.parse(text)
      setXmlData(jObj)
    })()
  }, [])

  return {
    data: {
      xmlData,
    },
  }
}

export default useGetXml

このスクラップは2024/01/05にクローズされました