September 20, 2020 | Issue #2 | Twitter logoShare

AWS loves Next.js (as Netlify) and promising RFCs

Welcome. This is the second edition of Next.js News. Between issue #1 and #2 we went from 0 to 500+ subscribers and Next.js conference went from 25,000 to 45,000+ attendees. Happy reading!

Aws + Next.js = โค๏ธ

Next.js and AWS Amplify logo

Amazon announced that AWS Amplify was now even more Next.js friendly. But what does it means exactly? Well, I did the full Amplify's Next.js Getting Started tutorial to understand it better.

Amplify is the AWS framework to create mobile and web applications. After finishing the getting started, you end up with a regular Next.js application using Amplify React components, themselves generating login forms (for example) connecting to AWS services directly.

Until this announcement, you could not use Amplify in SSR contexts, which means that listing blog posts would not work in SSR but only on the frontend. Now, this is solved and, Amplify is SSR compatible! Moving forward, they will also provide native Next.js deployment to AWS Cloudfront via the Amplify Console. For now, they recommend the serverless framework and, it takes two lines of code and one command.

Why I Think It's a Big Deal

The fact that Amplify is more compatible with Next.js is not the main part. The takeaway is: Amazon thought Next.js was so vital that they had to add it to their tooling and try to benefit from its popularity. I don't know for you, but for me, this proves once again that Next.js is becoming a significant part of how to build modern applications today. This trend will go on.

Netlify Also Loves Next.js

Netlify logo

At around the same timing of the AWS announcement, Netlify adopted next-on-netlify, a community package to ease the deployment of Next.js applications on the Netlify platform. Cassidy Williams (Netlify employee) will join the maintainer team and present "Touring Next.js" at the Jamstack conf 2020.

So.. Who's next to make Next.js a first-class citizen of their platform? Azure? It's done.

Best and Most Shared Content ๐Ÿ—ž

Comparing Styling Methods In Next.js โ€” Thanks to Next.js flexibility, you can use any styling technique with it. I use Tailwind CSS and Styled JSX. If you haven't yet decided, or you're just curious, Adebiyi Adedotun wrote a detailed overview of all the styling methods available in Next.js.Which styling solution are you using? Let me know on twitter.

Bulletproof Next โ€” The Next.js course from Arunoda Susiripala is out! Arunoda was the previous Next.js lead at Vercel and is now writing learning material for Next.js. The course goes into exciting topics like optimistic UIs, pagination, different data stores solutions, and optimization of Next.js applications.

Tools and Plugins ๐Ÿ”ญ

iamvishnusankar/next-sitemap is the kind of project that just worksยฎ. I needed a sitemap solution for the Next.js News website and found this recently released module. Install it, create a next-sitemap.js configuration file, and done. It even split sitemaps when they are too big. If you need a sitemap (yes, you need one), then use this module.

hashicorp/next-mdx-remote is an evolution of next-mdx-enhanced, from the same authors. It allows MDX content to be stored remotely, is 50% faster, and works with getStaticProps or getServerSideProps.

If you've never written MDX, it's markdown + the possibility to instantiate React components anywhere on the page. It makes writing interactive blog posts straightforward. If you're reading Next.js News on its website, the embedded tweets are React components.

HashiCorp, the makers of Vagrant, are notorious users of Next.js. They collaborated with Next.js maintainers on static generation optimizations since they have thousands of Next.js powered pages.

Next.js Canary Review ๐Ÿฃ

Here are the most important changes coming up in future versions of Next.js:

  • #16642 Add handling for redirects from getStaticProps/getServerSideProps
  • #16993 Importing CSS from Third Party React Components
  • #17082 Provide resolvedUrl to getServerSideProps
  • #17009 Security upgrade node-fetch. We've all seen those warnings recently
  • #16758 Remove next-head-count . This allows for inserting scripts in <head> with less struggles

For a previous list, check out the same section in Next.js News #1.

And Now, a Word from Our Spon...

Just kidding! For now, this newsletter has no sponsors. I enjoy writing it, even if it takes me way too much time. I have no sponsors, but I do have affiliate programs on the services I use and love. Let's give this a try:

Fathom awesome UI

Fathom Analytics is a simple privacy-focused analytics tool that I use on all the products I build. If you think you need a Ph.D. to use Google Analytics, or you're just worried that they will track you until your last drop of blood, then signup for Fathom Analytics and get ten dollars credit on your first invoice.

If you'd like to sponsor this newsletter, send me an email at vincent@codeagain.com, we have a 65% open rate and an 85% click rate, whatever that means.

Enjoy the next part ๐Ÿ™.

Most Important Rfcs ๐Ÿ’ญ

If your heart goes boom every time Tim Neutkens tweets "Wrote an RFC to ..." then this section is for you.

The notable features that are coming up to Next.js are related to images and i18n. And those won't be small features.

  • Image Component for Next.js ๏ผ Image component proposal from Google
  • I18n Routing ๏ผ It just struck me that the challenging part of a multilingual website is routing
  • Image optimization ๏ผ I am personally excited by this one because it would add automatic avif conversion to images. Sometimes reducing images size by a 4x factor.

Interesting Discussions ๐Ÿ‘ฅ

Before You Leave

  • Lee Robinson joined Vercel as a Solutions Architect. Lee writes awesome Next.js and React learning material. It's a good move for Vercel because you need people that have been using your product in production to get good feedback. Congrats!
  • This newsletter is switching from bi-weekly to monthly for higher quality issues

If you enjoy this newsletter, share it!

See you next month ๐Ÿ‘‹

Fresh Next.js resources
every month

Built by @vvoyer