Next.js使用自定义Axios实例报错Localstorage not defined如何解决

Next.js 存在服务端渲染（SSR/SSG/ISR）阶段，服务端运行环境没有window和localStorage等浏览器专属API。你在创建Axios实例的阶段就直接调用localStorage.getItem()，如果代码在服务端执行就会直接抛出"Localstorage not defined"错误。
另外该写法存在额外问题：token只会在实例初始化时读取一次，后续用户登录更新token后，实例的请求头不会自动更新，会导致后续请求携带过期token。

修改你的Axios实例代码，初始化阶段不写死Authorization头，改为在每次请求发送前动态读取token，同时做环境判断避免服务端执行报错，你原代码中引入的next/dynamic在当前方案下不需要使用，可以直接删除：

import axios from 'axios'    
const baseUrl = 'http://127.0.0.1:8000/'

const axiosInstance = axios.create({
    baseURL: baseUrl,
    timeout: 5000,
    headers: {
        'Content-Type': 'application/json',
        accept: 'application/json',
    }
})

// 添加请求拦截器
axiosInstance.interceptors.request.use((config) => {
    // 仅在客户端环境读取localStorage
    if (typeof window !== 'undefined') {
        const token = localStorage.getItem('access_token')
        if (token) {
            config.headers.Authorization = `Bearer ${token}`
        }
    }
    return config
})

export default axiosInstance

如果你用的是Next.js 13+的App Router，你的注册页面是包含交互逻辑的客户端组件，必须在文件顶部添加'use client'指令，否则组件默认在服务端运行，调用浏览器API依然会报错。

内容的提问来源于stack exchange，提问作者finite_diffidence