Next.jsでページ内リンクを実装する

react-scrollのインストール

https://www.npmjs.com/package/react-scroll

npm install --save-dev react-scroll

[使用例]
//test.tsx
import {Link as Scroll} from "react-scroll"

export default function Layout():JSX.Element {
    return (
        <div>
            <header>
                <nav>
                   <Scroll to="skills" smooth={true}
                                            duration={600} offset={-30}>skills</Scroll>
                </nav>
           </header>
            <main>
               <div id="about">ここにコンテンツを書く</div>
               <div id="skills">ここにコンテンツを書く</div>
               <div id="values">ここにコンテンツを書く</div>
               <div id="future">ここにコンテンツを書く</div>
            </main>
        </div>
)}

option解説

• to="遷移先のid名"
• smoothをつけるとスムーズに移動するようになる。
• durationは移動時間
• offsetで到着位置をずらせる

//[応用例]
───────
```js
[応用例]
↑↑↑↑↑↑↑ 編集リクエストの内容

export default function Layout() {
{/* map関数で取り出してタグを生成する。 */}
    const navItem = ["about", 'skills', 'values', 'future']
    return (
        <div>
            <header>
                <nav>
{/* map関数で取り出してタグを生成する。 */}
                    <div className="space-x-6 md:space-x-8">
                        {navItem.map((item, index) => {
                            return (<Scroll to={`${item}`} className=" uppercase" smooth={true}
                                            duration={600} key={index} offset={-30}>{item}</Scroll>)
                        })}
                    </div>
                </nav>
           </header>
            <main>
               <div id="about">ここにコンテンツを書く</div>
               <div id="skills">ここにコンテンツを書く</div>
               <div id="values">ここにコンテンツを書く</div>
               <div id="future">ここにコンテンツを書く</div>
            </main>
        </div>
)}