I am stoked when it comes the latest release of Next.js, version 9. It brings a slew of features that makes server-side React a breeze. I know when I first started to mess around with Next.js I quickly became enamored, but a few things were clunky and difficult to configure.
Well, I’m happy to say that they raised the bar with this update. I am going to rave about it, but you definitely need to check out their blog post that goes over the latest features.
For a quick overview–there’s a support natively for Typescript now, if you’re into using that. Also automatic static optimization, which allows leverage server-side rendering and static prerendering to make your site blazing fast. Don’t forget about the production improvements as well as focus on the developer experience.
Speaking of the developer experience, I want to mention my hands down two favorite new additions.
The first is API routes. All you need to do is create a /api folder within your pages directory. Each endpoint is a javascript file inside of that directory. With this functionality can start building the api you need with ease–connecting to your database, handling post requests, and whatever else necessary to make your app work…
No longer do you need to build and fire up a separate Express server. The exciting part is the only thing that needs to be in the endpoint file is a simple handler function. This mirrors the functional component style of the rest of React, allowing for what feels to me to be a seamless experience.
It looks like this:
const handler = (req, res) => {
res.json("message:" "Keep hitting those endpoints baby.")
}
export default handler
Next.js the complete package now, from start to finish–giving everything you need to be as productive as possible and get your app going. There’s another feature that makes creating dynamic pages just as quick and painless as the client-side React Router approach.
Inside of your pages directory name your file like such blog/[postId].js. Inside of your component file, you use Next’s getInitialProps to fetch whatever data is necessary to render the component.
const Post = ({ data }) => {
return <p>Post: {data.title}</p>
}
Post.getInitialProps = async ({ query }) => {
const { id } = query
const response = await fetch(
`https://jsonplaceholder.typicode.com/posts/${id}`
)
const data = await response.json()
return { data }
}
export default Post
Man, I hope these updates make you as excited I am. You know, so that I wanted to share it it with all of you. Already I have found myself dreaming up my next Next project (pun intended.)
Get out there and build something cool.
Note: I have no affiliation with Zeit or the Next.js team. I’m just a huge fan of their work!