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

Knex and Typescript Starter Project

SQL is a very expressive and powerful language. Unfortunately, it has often been difficult to interact with database using SQL from object-oriented languages due to a mismatch of the data structures in the database versus the structures in the application programming language. One common solution to this problem where Object-relational mapping frameworks, which often come … Continue reading Knex and Typescript Starter Project

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