0
211
VistasLa instancia de Axios no funciona con Nextjs: 'Almacenamiento local no definido'
Tengo una aplicación de reacción.
Tengo un componente axios que quiero reutilizar:
import axios from 'axios' import dynamic from 'next/dynamic' const baseUrl = 'http://127.0.0.1:8000/' const axiosInstance = axios.create({ baseURL: baseUrl, timeout: 5000, headers: { Authorization: localStorage.getItem('access_token') ? 'Bearer ' + localStorage.getItem('access_token') : null, 'Content-Type': 'application/json', accept: 'application/json', } }) export default axiosInstanceAhora, trato de importar esto en mi página de registro de la siguiente manera:
import axiosInstance from "axiosInstance"
El archivo en sí se ve así:
const handleFormSubmit = async (values: any) => { axiosInstance.post(`account/register/`, { username: values.username, email: values.email, password: values.password, confirm_password: values.confirm_password, }).then((response) => { console.log(response); }); // router.push('/profile') console.log(values); };Sin embargo, esto arroja un error:
¿Pueden algunos por favor ayudarme con este problema? Soy nuevo en Nextjs y miré
https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr
pero no estoy seguro de cómo usarlo en este contexto.
2 Respuestas
Responde la pregunta0
localStorage es una propiedad en el objeto de la window , y dado que next.js es un marco de representación del lado del servidor, la próxima vez que represente el componente en el servidor, window.localStorage no estará definido.
Para importarlo, configure la instancia de axios de esta manera:
const axiosInstance = axios.create({ baseURL: baseUrl, timeout: 5000, headers: { // if localStorage is not defined, it wont throw error Authorization:localStorage && localStorage.getItem('access_token') ? 'Bearer ' + localStorage.getItem('access_token') : null, 'Content-Type': 'application/json', accept: 'application/json', } })y luego adentro
0
localStorage es parte del almacenamiento del navegador y no del servidor. Podría usar una variable de entorno y usar process.env.ACCESS_TOKEN
Se puede leer más aquí
Básicamente, crea un archivo llamado .env.local Hay soporte integrado en NextJS para este archivo.
Aquí definiste tus variables de la siguiente manera
ACCESS_TOKEN=myAccessTokenIsAwesome SOMETHING_ELSE=myOtherKeyINeed En su código, puede usar process.env.ACCESS_TOKEN para usar esta variable de entorno definida