Next.jsでナビゲーションバーを作成する方法

はじめに

Next.js(バージョンは14.2.3)でNavigationBarを作成したのでそれに関しての議事録を残します

結論

実装画面は↓こんな感じ
(スマホ用に実装したのでプロパティを変更する可能性あり)

以下のソースコードをコンポーネント化して任意の箇所に張り付ける

BottomAppBar.tsx

const BottomAppBar = () => {

    //現在どのパスを参照しているかを確認するためのuseState
    const [pathname, setPathname] = useState('');
    const router = useRouter()

    //現在のパスを格納
    useEffect(() => {
        setPathname(window.location.pathname);
    }, []);

    //ボタンを押すとURLを更新
    const navigateTo = (path: string) => {
        router.push(path);
    }

    const navItems = [
        { path: '/home', selectedIcon: <HomeIcon sx={{ width: 35, height: 35 }} />, defaultIcon: <HomeOutlinedIcon sx={{ width: 35, height: 35 }} /> },
        { path: '/add', selectedIcon: <AddCircleOutlinedIcon sx={{ width: 35, height: 35 }} />, defaultIcon: <AddCircleOutlineIcon sx={{ width: 35, height: 35 }} /> },
        { path: '/star', selectedIcon: <StarIcon sx={{ width: 35, height: 35 }} />, defaultIcon: <StarBorderIcon sx={{ width: 35, height: 35 }} /> },
        { path: '/account', selectedIcon: <AccountCircleIcon sx={{ width: 35, height: 35 }} />, defaultIcon: <AccountCircleOutlinedIcon sx={{ width: 35, height: 35 }} /> }
    ];

    return (
        <Box>
            <BottomNavigation sx={{
                width: '100%',
                height: '6%',
                bgcolor: 'white',
                position: 'fixed',
                justifyContent: 'center',
                bottom: 0,
                left: '50%',
                transform: 'translateX(-50%)',
                zIndex: 1000,
                borderTop: 1,
            }}
            >
                {navItems.map((item, index) => (
                    <BottomNavigationAction
                        key={index}
                        value={item.path}
                        onClick={() => navigateTo(item.path)}
                        icon={pathname === item.path ? item.selectedIcon : item.defaultIcon}
                        sx={{
                            color: pathname === item.path ? 'black' : 'inherit',
                            '&.Mui-selected': { color: 'black' }
                        }}
                    />
                ))}
            </BottomNavigation>
        </Box>
    );
}

詳細

• フレームワークはNext.jsとMUIを使用している

• パスの変更は基本的にuseRouter()を使用している

• パス名の保存方法について
  →パス名はuseStateで状態を管理。useEffectで現在のパスを取得して格納する。ちなみに[windows.location.pathname]はuseEffect内でないと動かないので注意すること。