NextJS React Framework and Blockstack? [Issue with 'window']

#1

Hi there,

I’ve been trying to test Blockstack’s authentication with the NextJS React Framework but running into issues.

First was the appConfig having issues due to: ReferenceError: window is not defined. I ended up manually setting the AppDomain argument.

Now I’m getting: Error: redirectToSignInWithAuthRequest uses the *window*.navigator API which is not available in the current environment.

It seems there is something that NextJS does to ‘window’ that is not making it play friendly with blockstack.

Has anyone come across the same issue or used/using NextJS with Blockstack? Would love to know what the workaround or setting might be to resolve this.

Btw, NextJS setup tutorial as reference if anyone has time to test it: https://nextjs.org/learn/basics/getting-started

Thanks in advance!
P

#2

Seems this could be the issue: https://github.com/zeit/next.js/wiki/FAQ

#3

Hi there!

So next.js is a framework that allows react to be server side rendered (ssr), and through that, many of the components and things you’re building will first get run on the server (a node environment). the global window does not exist in the context of the server, it exists on the client (your browser). What happens with ssr react is that an initial pass happens and with next.js there are things that can be done on the server like fetching data, rendering components and such, and then those will get shot over to the client when a user first navigates to a page. This gives a considerable performance and ux boost because you can start with data and state, and not have to wait for the javascript to run, render everything and fetch data on the client like you would in a non-ssr environment.

There can be a lot of things that just don’t work on the server, one of them being anything that references window or document objects. You can break out the stuff that does reference those into another component, and then use a dynamic import with an option passed to not have it run on the server. see this part of the readme -> https://github.com/zeit/next.js#dynamic-import

You can also view the source code for Banter, an app built with next.js and blockstack. https://github.com/blockstack-radiks/banter

Hope this helps!

1 Like
#4

I am working on opencollective to get blockstack auth done. They use next.js as well.

You don’t need a window object if you specify the appdomain and the redirectAuthToken.

Currently, I have a problem with the session storage.

#5

Hope it works out! I’ve since gone with Create React App after following TechRally’s tutorial series on YouTube.

#6

The opencollective integration is working now! Please see issue github.com/opencollective/opencollective/issues/1749

1 Like