September 1, 2020 | Issue #1 | Share
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.
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:
Here's what you can expect:
Register today and see you there π
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.
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.
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! π
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:
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)optimizeFonts
flag (tweet, pr)optimizeImages
flag (tweet, pr)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.
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.
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.
See you next month π
Built by @vvoyer