[Day 9]人不作死就不会死(前端篇)

挑战目标: MockNative Camp前端

昨天尝试refactor时遇到了来不及解决的Bug，今天专心的在看一遍官方文件，这次注意到了

当时我使用的是serverRuntimeConfig，注解里写着

// Will only be available on the server side

代表无法在client side使用，而这个error拿去喂狗後发现只会在server side render中发生，我就在想是不是我使用错config了，我将serverRuntimeConfig改为publicRuntimeConfig，果然是如此！
next.config.js

module.exports = {
    images: {
        domains: ['nativecamp.net']
    },
    publicRuntimeConfig: {
        navTab: [
            { name: "首页", image: "https://nativecamp.net/user/images/gnavi/ic_home.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_home-h.svg" },
            { name: "指南", image: "https://nativecamp.net/user/images/gnavi/ic_guide.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_guide-h.svg" },
            { name: "学习", image: "https://nativecamp.net/user/images/gnavi/ic_study.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_study-h.svg" },
            { name: "搜寻・预约讲师", image: "https://nativecamp.net/user/images/gnavi/ic_search.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_search-h.svg" },
            { name: "其他", image: "https://nativecamp.net/user/images/gnavi/ic_etc.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_etc-h.svg" },
        ]
    }
}

改完之後重新启动後就正常了，完成了昨天应该完成的目标，对Nav做refactor以及解决hover bug，

但其实有发现一个可以优化的地方，就是Image的scr是使用外部图片，在每次hover时因为会改变图片，所以hover时会抓取hover後图片然後离开hover时会抓取一般图片，导致可以从开发者工具的Network中看到随着滑动下载图片的次数激增。

主要是因为是使用url去抓图片，所以会造成这个问题，在一般开发中图片都会存放在专案中，所以不会有这种问题，此次挑战是能使用外部素材就使用，所以才会有此种状况。