DEV Community 👩‍💻👨‍💻

Brian Barbour
Brian Barbour

Posted on • Updated on

Wow! Next.js Continues to Impress

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.

Zeit's Version 9 Blog Post

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.

head spinning

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
jamesgardner profile image
James Gardner

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?

Collapse
 
lffg profile image
Luiz Felipe Gonçalves • Edited on

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

Collapse
 
jamesgardner profile image
James Gardner

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?

Thread Thread
 
bbarbour profile image
Brian Barbour

So far, from what I understand, Google is the only one that has greenlit crawling SPA/client-side rendered apps.

Collapse
 
bbarbour profile image
Brian Barbour

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.

Collapse
 
jetroolowole profile image
Jetro Olowole

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?

Collapse
 
xcyborg profile image
Jonney Shih

I want to add a plain MongoDB connection with Next and API routes, any ideas?

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠