render Nextjs help I beg

Question

import File from './File'
function Index(){
    const allPostsData =  allPostsDataGet();
    var page = 0;
    function change({target}){
        page = target.textContent
        Index();
    }
    return(
        <>
            <File>{allPostsData[page]}</File>        
            <button key='10' onClick={change}>1</button>
        </>
    )
}
export default Index;

people how do I make a new render on the page, using nextJS ? type want to render first part (being the first position of the array) and then when desired render and display the second element of the array on the page.

the function allPostsDataGet returns an array of Objects, and each Object has 7 links