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!
Top comments (7)
Out of interest, what is the main justification for using Next.js? What are the deciding factors that make Next the tool for the job?
If you need a good SEO, you probably need to have SSR. You can achieve that by using frameworks such as Next.js or static site generators, like Gatsby.
However, if your data changes frequently, you should consider using Next.js.
You may want to watch this video:
m.youtube.com/watch?v=fuzPXzkfebo
Cool, I've done a fair bit with Gatsby and have made use of 'hybrid' pages to cover dynamic aspects. Luckily most of those have been behind authenticated journeys that don't require SEO.
On another note, I'm really confused about the state of affairs when it comes to SEO and SPAs. Google is said to be 'ok' even with async code: medium.com/@l.mugnaini/spa-and-seo...
But what about other search engines like Bing?
So far, from what I understand, Google is the only one that has greenlit crawling SPA/client-side rendered apps.
Also, it reduces the initial bundle size that the client receives. So, it works better on low performance devices, like older cell phones and stuff.
My web app will have different section that will connect different APIs. I intended building using Express with Nextjs and MongoDB. Do you think the new API feature of Next 9 version will be ideal for me?
I want to add a plain MongoDB connection with Next and API routes, any ideas?