The testing setup of my dreams is finally a reality — In its latest release, Playwright has gained a new feature called Playwright Test. This newly added test runner for Playwright enables the smoothest testing experience in Next.js applications I have ever seen. Once set up, it allows testing with real browsers across multiple device sizes. We’ll be able to mock…

How to release with confidence — Releasing features into production can be quite the thrill. Surely you’ve tested the feature you’ve been working on locally to ensure that it works as expected. …

Efficient data fetching in Next.js — Only by chance did I stumble upon one of the best Next.js patterns I’ve seen. The documentation never mentions a word about it, but luckily I found this neat approach in the official examples. It helps you avoid unnecessary requests and speeds your application up along the way. I’ve used…

How to set them up for development and production — Next.js is one of the best-documented projects I have ever used. However, the section about Environment Variables left me confused. I didn’t know how to set up variables for development and production and how to define which variables the client should have access to. If configured incorrectly, the secrets and…

Combining Cognito’s robustness with the simplicity of Next.js — Note: The aws-cognito-next package mentioned in this article has since been deprecated. Please consider using Next Auth with a AWS Cognito Provider or the AWS Amplify Next.js integration instead. One of the hardest things when starting a new project with Next.js is that there is no default way of handling…

An alternative to Styled Components, but without the runtime?* — Today we want to take a look at Compiled and its @compiled/css-in-js package. It aims to provide the familiar CSS-in-JS authoring experience without its runtime cost. Looks like Styled Components, tastes like no runtime This example is shown on the website of Compiled: During the installation of Compiled, you’ll add a Babel plugin called @compiled/babel-plugin-css-in-js to your…

aka the missing paragraphs of “Use a Render Prop!” — Update (2018–09–13): This article goes into the details of how to test render props in Enzyme. I’ve since moved away from Enzyme as I believe react-testing-library uses a far better approach! Try writing some tests with it and you’ll appreciate it! It allows me to refactor my code without touching…