Written by James McDonald

July 2, 2018

I came across NextJS when looking at the excellent DevTips YouTube channel  video regarding Going from Sketch to React.js #2 Building an Online Business

NextJS solves some of the problems that I found hampered me in using React:

  1. Server Side Rendering out of the box
  2. Easier to understand routing

So I’ve been following the NextJS documentation and other stuff and folding in Redux.

Because I eventually want to run an instance of CakePHP with a JWT Auth setup… This comment from NextJS github looks like it will work really well https://github.com/zeit/next.js/issues/153#issuecomment-257924301

I have deployed an app at http://node.toggen.com.au using nginx and pm2

server {

# strip www redirect to ssl
listen 80;
server_name node.toggen.com.au;
root /home/robert/node/web;

location / {

proxy_pass http://nodeHost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection ‘upgrade’;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}

It’s been months since I started to look at React and the node ecosystem. I’m slowly starting to understand what I’m seeing. The problem is there are a myriad of ways to accomplish each thing. You iterate through different approaches trying to find the one method that offers the least compromise, and an approach that works according your own personal ‘logic’

So you end up to making a chain of mistakes before you arrive at the solution that the rest of the internet found just after they stopped posting questions to stackoverflow and medium and every other online resource.

Finding those ones on the internet that not only understand, but also can pass on their knowledge takes time but is worth the effort. These include Dan Abramov, Dave Ceddia amongst others  (Google them it’s worth it).

So you learn React using both class based and functional components, and then learn that it doesn’t give you SSR on it’s own so doesn’t give you SEO.

Then you search for a framework to handle SSR and find NextJS. Then you find that NextJS wants you to use <style jsx> and suddenly you are down another branching rabbit hole trying to understand the logic behind applying CSS-JS styling in the component.

While trying to master the disparate technologies and methodologies all the time you are instinctively trying to stay away from tool chain complexity by using the get-you-started-quickly create-react-app or create-next-app. But still, they only get you 87% of the way (thankyou to whoever developed them btw, they are great) and before long you have 20 tabs open looking for a way to work-a-round a bug, or striving to understand how to achieve what you need.  The helpful internets are saying “do this” to your package.json and .babelrc, and put the following code into X and the entire thread has a cacophony of people espousing different approaches.

But in the end if you don’t learn these newer technologies you are stuck in 1998 and IE6.

I’m going to bed it’s half eleven

 

 

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The reCAPTCHA verification period has expired. Please reload the page.

You May Also Like…

Squarespace Image Export

To gain continued access to your Squarespace website images after cancelling your subscription you have several...

MySQL 8.x GRANT ALL STATEMENT

-- CREATE CREATE USER 'tgnrestoreuser'@'localhost' IDENTIFIED BY 'AppleSauceLoveBird2024'; GRANT ALL PRIVILEGES ON...

Exetel Opt-Out of CGNAT

If your port forwards and inbound and/or outbound site-to-site VPN's have failed when switching to Exetel due to their...