title: How can I store user information in Next.JS + Rails API backend?
body: <p>I'm new to Next.js and React in general, I used to develop the whole application with Rails.</p>
  <p>I want to combine rails API with Next.js. My JWT backend has an endpoint that returns a JSON object containing user information when requested with JWT token in header. In my <code>_app.js</code>, I'm trying to authenticate users using this backend by using <code>useState</code> and <code>useEffect</code> like this:</p>
  <pre><code>export default function MyApp(props) {
    const [user, setUser] = useState({})
  
    useEffect(function () {
      const token = localStorage.getItem('token')
      if (token) {
        fetch('http://localhost:3001/auto_login', {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        })
          .then((resp) =&gt; resp.json())
          .then((data) =&gt; {
            console.log(data) // {id: 1, email: &quot;test@example.com&quot;}
            setUser(data)
            console.log(user) // {}
          })
      }
    }, [])
  
    return (
      &lt;&gt;
        { // some code }
      &lt;/&gt;
    )
  }
  </code></pre>
  <p>In my first <code>console.log</code>, it returns an object that I would like to store in <code>user</code>. However, in my second <code>console.log</code> where I expect to return the same result, I get an empty object instead.</p>
  <p>Am I missing anything, or are there any points that I have to take into consideration as a whole? I've already tried implementing this with <code>async/await</code>, but that didn't seem to solve my problem.</p>