25,000+ Attendees, Essential Projects 🏢 and Pro Next.js Techniques

Hi there, this is the first issue of Next.js News. I am Vincent, and I will be writing about everything Next.js every two weeks. If you have any comments, suggestions, or ideas for this newsletter, just hit reply or discuss on twitter.

The Big News:Next.js Conf🗣#

There should be more than 25,000 people registered for the upcoming Next.js online conference when you will read this. It has only been one week since Guillermo Rauch tweeted ticket #000001.

Here's what we know about the conference:

• It's on October 27
• It will be online
• There will be A LOT of people
• The code for the conference website is on GitHub.
• The Code Of Conduct is online on Notion.

Here's what you can expect:

• Quality talks by both Next.js maintainers and community members
• Important releases (Next.js, Vercel)
• Surprises!

Register today and see you there 🙌

Best and Most Shared Articles 🗞#

Authentication Patterns for Next.js - Lee Robinson walks us through the different ways to implement authentication in your Next.js application. Lee is also backporting some of this knowledge into the official Next.js documentation.

Building a Blog with Next.js and MDX - John from Chicago explains how he (re)made his blog with Next.js and MDX. I never used MDX, but I have seen many mentions of it recently.

Not so many recent Next.js articles, if you have suggestions or content you'd like to read, reply to this email.

🆕 New Tools#

next-google-fonts - A tiny next/head helper for loading Google Fonts fast and asynchronously

next-img - A Next.js plugin for embedding optimized images. You might wonder how it is different from next-optimized-images: it has been created because its author had issues with next-optimized-images (like Next.js compatibility). I just learned that next-optimized-images v3 is coming soon, you can check the canary version.

Essential Projects 🏢#

Because this is the first issue, I want to highlight a few projects that are becoming essential to build Next.js applications.

NextAuth.js - Authentication for Next.js. This is one of the most professionally looking projects in the Next.js ecosystem. I never tried it though; I built next-iron-session for my own needs. But, if I had to start a new Next.js project, I would give it a try.

SWR - React Hooks library for data fetching. This is a project from Vercel (the company behind Next.js). They use it to build their own dashboard. It's the tool that saved me from the React state libraries nightmare. With it you can quickly create pages where you fetch data on your API routes and have the page always up-to-date every time you switch back to it.

Here's what Arunoda Susiripala, creator of Storybook and previous project lead for Next.js, have to say about SWR:

Most of the time, you don't need a solution like this (Redux, Recoil, MobX). You can do a lot with React hooks and data fetching features in Next.js. We use SWR as a data management layer because it's simple to use but powerful. Trust me. I worked with a pretty big Next.js app; we never needed Redux.

Fine with me! 😀

Next.js Canary Review 🐣#

Canary is the development branch of Next.js. The branch is released almost every day on npm. If you want to live on the edge, watch the Next.js releases, and use it in your project: yarn add next@canary.

What's coming up in future versions of Next.js? Here's what I am excited about:

• No more href="/album/[albumId]" as="/album/234". We will be able to directly use href="/album/234" and Next.js will map it to /album/[albumId].js. A small change that will allow us to remove code in our Next.js application! (tweet)
• Webpack 5 support: Aside from the pure version bump, the big win will be on the developer experience. Builds time should be way faster thanks to Webpack 5 persistent caching. (tweet, pr)
• Yarn v2 compatibility: While Next.js was supposed to be working with Yarn v2, it seems it still needed some changes for it to work with it (issue)
• Fonts optimization: 9.5.2 introduced experimental font optimization via the optimizeFonts flag (tweet, pr)
• Images optimization: 9.5.2 introduced experimental image smart preloading via optimizeImages flag (tweet, pr)

👥 Interesting Discussions#

The Next.js community lives at github.com/vercel/next.js/discussions. This is where you can ask your Next.js questions and get answers from either the Next.js maintainers directly or community members like us.

In this section, I highlight the most interesting resolved discussions.

1. Are there official samples for testing API routes with Jest 💬  10 replies
2. How to open Link in new tab? 💬  9 replies
3. Rendering Non-React Component (HTML/JSON page) 💬  9 replies

Most Commented Rfcs 💭#

Requests For Comments (RFCs) are feature proposals; anyone can submit an RFC via the discussions tab of the Next.js GitHub project. You can read and even comment on the current RFCs.

1. Returning redirects from getServerSideProps / getStaticProps 💬  39 replies
2. Importing CSS from Third Party React Components 💬  35 replies
3. Automatically transpile files based on baseUrl configuration 💬  21 replies

⚡️ Pro Next.js Techniques#

The section title was stolen from the first JavaScript book I ever read: Pro JavaScript techniques, don't buy it though, it's 14 years old 👴

Next.js features are coming out every month, and it's hard to keep up with all of them and cherry-pick the features that would benefit your applications. In this section, I highlight the ones I really rely on for all my projects, and hopefully, you will discover some of them. After all, this is why you subscribed to this newsletter!

🙇‍♀️ Challenge: How do you turn import "../../../../components/header.js" into import "components/headers.js"?

💡 Solution: Use absolute imports and module path aliases. Create a file named jsconfig.json or tsconfig.json and add inside:

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

That's it! Now you can start importing any module right from the root of your project. Bonus: code editors like Visual Studio Code also support this, so they understand how to autocomplete import paths.

Share this issue

See you next time 👋