I am currently in the process of transitioning an application from React to Next
Interestingly, in React, I encounter no errors with this particular code snippet:
let [authTokens, setAuthTokens] = useState(() => localStorage.getItem('authTokens') ? JSON.parse(localStorage.getItem('authTokens')) : null)
let [user, setUser] = useState(()=> localStorage.getItem('authTokens') ? jwt_decode(localStorage.getItem('authTokens')) : null)
However, upon attempting to use it in Next.js, an error arises.
https://i.stack.imgur.com/Yj20d.png
The issue appears to be due to the fact that Next.js initially renders on the server side where local storage is unavailable.
This function is responsible for setting the data in local storage.
let loginUser = async (e) => {
e.preventDefault();
let response = await fetch('http://127.0.0.1:8000/api/token/', {
method:'POST',
headers:{
'Content-Type': 'application/json'
},
body:JSON.stringify({'email':e.target.username.value, 'password':e.target.password.value})
})
let data = await response.json()
console.log(data)
console.log(data.access)
if(response.status == 200) {
setAuthTokens(data)
setUser(jwt_decode(data.access))
localStorage.setItem('authTokens', JSON.stringify(data))
router.push('/')
} else {
alert('something went wrong')
}
}