October 19, 2020 | Issue #3 | Twitter logoShare

The Fullstack React Frameworks Competition ⚔️, Next.js Performance, and Mighty Hrefs

Welcome to Next.js News #3. I want to send a warm 🔥 welcome to the 600 new readers who joined after JavaScript weekly featured us in their last issue. We're now 1,200+ Next.js fans (including BigCos, yes, you know who you are); it makes me extremely happy and nervous at the same time. This is Next.js News #3. Happy reading!

The Fullstack React Frameworks Competition ⚔️

WWE ring with fighter faces replaced by fullstack frameworks logos

Instead of using Next.js, you may be or, you could be using other tools. Because I am so focused on Next.js, lately I thought: “But what about the others?”.

🔴  RedwoodJS is an open-source project from Tom Preston-Werner, co-founder of GitHub. RedwoodJS combines React, GraphQL, and Prisma into a fullstack framework. /web folder is holding pages, and API routes are in /api. You can create components exposing a GraphQL query coupled with different component-states based on the response. It has Rails-like CLI generators, Form helpers, and flash messages. The roadmap suggests they are working on: authentication, authorization, Apollo 3.0, deploying on Google Cloud, TypeScript, and testing.

They officially support deploying on Netlify, Vercel, and AWS, which is excellent. Because, for example, deploying Next.js on something else than Vercel is left to the community.

⚡️  Blitz.js is a fullstack React Framework built on top of Next.js. It adds a complete data layer (loading, mutations) coupled with Prisma 2 (PostgreSQL) by default. Sessions, authentication, and authorization are built-in. Database migrations are here too. They officially support deployment to Vercel and Render. It's as if Blitz.js packaged Next.js with all the current best practices or at least the ones Blitz.js chose.

💽  Remix from Ryan Florence and Michael Jackson, authors of React Router. It has file system routes (gists/$user.js), server and client data loading, one CSS file per route, advanced caching and, can be deployed on multiple platforms. Remix will launch in beta on October 28 for $250 (one year license).

🍸  Gat "the legend" sby. Still going strong, maybe not targeting the same developers like the previous projects but a very advanced React framework nonetheless. Lately, they added: file system routing (OH HAI!), a desktop application, and Gatsby Admin. But, the echoes I get from people using Gatsby are: not flexible enough and slow builds. And once you get the "slow tool" sticker on your back, it's tough to remove it (re Firefox).

Vote for your favorite fullstack React framework of 2021 below 👇👇👇

Best and Most Shared Articles 🗞

Core web vitals illustration

Performance! Performance! Performance! This month we start with three articles related to optimizing Next.js applications.

How to Reduce Next.js Bundle Size — An in-depth article on what you can do to reduce your Next.js bundle size. There's one last thing you could try, switching to Preact.

Getting Started With Web Vitals in Next.js — Web Vitals is the latest effort from Google to consider user experience and performance in their rankings.

Automated lighthouse score to your PR (Vercel + GitHub actions)— Automatic Lighthouse reports on all your pull requests.

🧵  More articles:

Tools and Plugins 🔭

Next page tester — DOM Integration testing on Next.js pages. If you're into testing, check cypress and Checkly.

next-themes — An abstraction for themes in your Next.js app, from Paco Coursey, a Vercel employee. Need 🧛‍♂️ dark mode?

Services 💁‍♂️

We're starting to see SAAS services dedicated to the Next.js platform.

Quirrel — Job Queueing for Next.js x Vercel. Simon, the creator, is also maintaining Blitz.js.

HappyKit Flags — Feature flags for Next.js. Dominik, the creator of HappyKit, wrote Using Feature Flags In Next.js. Enjoy!

Next.js Users Are Happy Users 😁

In May, I missed that the Jamstack 2020 Survey Results (3,127 respondents) came out. Charts are for smart people so, if someone looks at your screen right now, they'll think you're smart. You can thank me later for that.

Graph of

Recent Next.js Powered Websites 💫

You might not know it, but all those websites are now powered by Next.js:

Next.js Conf Is Next Week (October 27) 📆

Next.js logo animation from the Next.js conference

60,000 people registered for #nextjsconf. And there's now a Discord server you can join: https://nextjs.org/discord. My prediction 🎱 is that Vercel will use Next.js conf to release new Next.js features like:

  • Webpack 5 by default;
  • i18n routing and tooling;
  • Image optimization;
  • Font optimization;
  • And even more mind-bending announcements.

No canary review nor RFCs summary this month. What was planned is currently being developed or released as canary. To know more about these features, check out previous issues of Next.js News, and stay tuned!

Join Secret and Get Thousands of Dollars in Startup Credits

Next.js logo animation from the Next.js conference

This month product I use and love is Secret. Secret has offers for credits on AWS (up to $5,000!), Stripe, Twilio, Airtable, Notion, and 150+ other services. If you're building a product, you can save thousands of dollars. ⚡️ Instantly.

👉 Next.js News is partnering with Secret: use this link: https://www.joinsecret.com/?via=vincent, and get 20% discount on any of their plans.

PS: You don't need to be inside a startup incubator to benefit from those offers.

Because Next.js is moving so fast, you might have missed that you can now replace all occurences of:

<Link href="/post/[slug]" as={`/post/${post.slug}`} />

with:

<Link href={`/post/${post.slug}`} />

I've started doing it on my projects. Everytime I encounter an old Link, I just delete the href and rename as to href.

But is as still useful? Maybe, someone is using it to do Contextual routing and modal routes in Next.js.

Text "the end" animated

If you enjoy this newsletter, share it!

See you next month 👋

Fresh Next.js resources
every month

Built by @vvoyer