In a Next.js app, you can use the map function to map the values of an input field to an array. Here’s an example of how you can do this:

import React, {useState} from 'react'

function App() {
    const [values, setValues] = useState([])

    function handleChange(event) {
        setValues(event.target.value.split(','))
    }

    return (
        <div>
            <input type="text" onChange={handleChange}/>
            <ul>
                {values.map(value => (
                    <li key={value}>{value}</li>
                ))}
            </ul>
        </div>
    )
}

In this example, we have an input field and an unordered list. When the user types into the input field, the handleChange function is called, which splits the input value into an array using the split function. The array is then set as the new value of the values state variable using the setValues function.

Finally, we use the map function to iterate over the values array and render a list item for each value. The key prop is used to ensure that each list item has a unique key, which is required for rendering lists in React.

When the user types into the input field, the list will update to show the values that were typed, separated by commas.