Debloated Markdown Blog with Zola
We detail how this blog was debloated using Zola and no Javascript. It now respects users privacy by not including any javascript whatsoever (especially no Google tracking code), and is almost as small a payload to deliver to the browser as possible.
2021-04-14
A manageable CSS framework for React with TailwindCSS
Tailwindcss separates concerns effectively between a css styling framework and javascript application code. Because of this you avoid components having too many props that affect their styling in favor of the vanilla classNames property controlling all the styles
2020-05-26
Static Files in Next.js
When building a Next.js project you often might want to host some static files along side the application code. Next makes this easy with the `public/` directory.
2020-03-15
Image optimization with Next.js
Having large un-optimized images will slow down your site performance dramatically. There's a long list of optimizations that can be made to rendering images, and some useful libraries for handling this in a Next.js application.
2020-03-14
Next.js javascript heap out of memory
You might occasionally run into JavaScript heap out of memory errors while building Next.js projects, not to fear! It's typically a simple solution.
2020-03-13
Defining an array of objects in Typescript
The most simple way to define an array of objects in typescript is by placing brackets after an interface, you can do this either by defining a named interface or inline.
2020-03-12
Building a blog with Next.js
Next.js is a great (I would argue the best) platform for building a simple (but custom) blog in 2020. New features like static site generation and preview mode make building a blazing fast blog super simple.
2020-03-11
XState forms and validation
XState is a great solution for creating custom forms in a React based application that have strict validation and are stable against users hitting edge cases.
2020-03-09
State Management in Next.js
Managing state in Next.js or any React based framework comes with it's challenges, but the route that gives the most power to boiler plate ratio is using Xstate to build state machines at both the local and global levels
2020-03-08
Fetching Data in Next.js
Next.js gives you a lot of flexibility in different ways to fetch data, but there are some best-practice patterns / methods. Recent additions from the Zeit / Next team like SWR, and upcoming build-time data fetching have also opened up a few more paths to getting data in your Next.js application.
2019-11-30
Styling a Next.js Project
Next.js has a few built-in styling methods and many more are possible to integrate. We'll review the built in methods, how to integrate a custom method, and some ways to handle responsive styles.
2019-11-26
How to set up a Next.js Project
We'll walk through the first steps that you should take with a new Next.js project, from installing the package to getting your dev server running, and some common companion things to set up such as linting.
2019-11-22
Nested routes in Next.js
Defining routes in Next.js, including nested routes, is done primarily through the file structure in the pages directory.
2019-11-20
Using Google Fonts with next.js
The web has come a long way, but getting your font to show up on your site without flashing and not blocking rendering can be tricky. Google Fonts now supports font display swap which is a great way to make sure that your page loads and if for whatever reason the custom font doesn't load it falls back to a system or other local font.
2019-11-18
Get the Current URL in Next.js
There are a number of cases that need to be handed properly when getting the current URL in Next.js. Those being, server vs client and local vs prod. It's important to be able to get the current URL, especially if you are using API routes and need to get that api data into your page through getInitialProps.
2019-11-14
Get query params in Next.js
Getting query parameters in Next.js is very simple, but is done differently on the client and on the server.
2019-11-13
Next.js Content Management System (CMS)
We detail a general approach for connecting a Next.js application to a CMS,that makes use of the stale-while-revalidate cache setting for near instant updates. Many CMS have guides on how to integrate to Next.js using their client libraries. This can work well depending on the client library, we’ll show a more general approach using the CMS’s API here.
2019-11-11
A good gitignore for Next.js
There are a few common files that should be ignored for every Next.js project. We give a recommended configuration for working with git in Next.js projects
2019-11-08