Next.js 11 Images with Static Export

Next.js 11 includes an exciting new feature for dynamically optimising images using the <Image> tag. Unfortunately, this new feature does not play nicely with exporting a static version of the Next.js app using yarn next export by its very design. This is not great for serverless deployments, which often will rely on uploading the static … Continue reading Next.js 11 Images with Static Export

Next.js with Bootstrap Getting Started

Next.js is an open-source framework for React that aspires to reduce the amount of boilerplate code required for developing React applications. Key features that Next.js provides out of the box are: Routing Code Splitting Server side rendering I recently developed a small example application with Next.js and came across some minor difficulties when trying to … Continue reading Next.js with Bootstrap Getting Started

Textures and Lighting with React and Three.js

In my previous three posts, I have developed a simple WebGL application using react-three-fiber and three.js. In this post, I am adding texture loading and proper lighting to the application. For reference, here the links to the previous versions of the app: Version 1: Just being able to drag a shape on the screen Version … Continue reading Textures and Lighting with React and Three.js

Create and Drag Shapes with Three.js, React and Cannon.js

Following up from my article published a few days ago, I have now extended and improved the simple WebGL application that I originally developed using Three.js and react-three-fiber. Version 1 of the application allowed dragging a simple shape around on the screen: App: https://react-three-fiber-draggable.surge.sh/ Source Code: https://github.com/mxro/threejs-test/tree/master/test1 Version 2 combines this basic premise with the … Continue reading Create and Drag Shapes with Three.js, React and Cannon.js

Creating a Draggable Shape with React Three Fiber

I recently became interested how to render 3D graphics in the browser. I think WebGL is an extremely powerful technology and may one day become an important way of rendering content on the web. There are various frameworks and tools available to use WebGL such as Babylon.js and three.js. To me, three.js looks the most … Continue reading Creating a Draggable Shape with React Three Fiber

GraphQL, Node.JS and React Monorepo Starter Kit

Following the GraphQL Apollo Starter Kit (Lerna, Node.js), I wanted to dig deeper into developing a monorepo for a GraphQL/React client-server application. Unfortunately, things are not as easy as I thought at first. Chiefly the create-react-app template does not appear to work very well with monorepos and local dependencies to other packages. That's why I … Continue reading GraphQL, Node.JS and React Monorepo Starter Kit