Nextjs Custom LocalStorage Component

/**
* Why you must be created custom component for locaStorage, because localStorage is not support in ssr, if you not created
* custom component for localStorage, you  can get error response like localStorage is not defined.
*/

/**
* Nextjs Components Territory
*/
function Storage(props) {
    const LocalStorage = ({ type, keys, value, onLocalStorage }) => {
        switch (type) {
            case 'set':
                keys !== undefined && window.localStorage.setItem(keys, value)
                break
            case 'get':
                keys !== undefined && onLocalStorage(window.localStorage.getItem(keys))
                break
            case 'remove':
                keys !== undefined && window.localStorage.removeItem(keys)
                break
            case 'clear':
                keys !== undefined && window.localStorage.clear()
                break
            default:
                alert('localStorage type undefined')
                break
    }
}

    return <div>{LocalStorage(props)}</div>
}

export default Storage

/**
* Nextjs Pages Teritory
*/

import dynamic from 'next/dynamic'
const LocaStorage = dynamic(() => import('../components/Storage'), { ssr: false })

function Home() {
    const getLocalStorage = (val) => alert(val)

    return (
        <div>
            <LocaStorage type={'set'} keys={'name'} value={'My name is restu wahyu saputra'} />
            <LocaStorage type={'get'} keys={'name'} onLocalStorage={getLocalStorage} />
        </div>
    )
}

export default Home