next.js tutorials

I figured I’d keep track of the resources I’ve consumed on my road to learning React with the nextjs framework. I’ve previously had a play with straight React, but I’m starting from practically zero so… let’s see how this goes!

Next.js Tutorials

First up, I took a look at nextjs.org, which seems to have pretty good documentation and tutorials.

I just followed this tutorial through from start to finish one morning. This tutorial gives you plenty of code to copy and paste, but sometimes doesn’t give much explanation as to what each bit is doing. It’s worth spending some time actually reading the code you’re copy/pasting to understand what is going on.

There are links for further reading for most sections, which are also worth a read. You can also read further into any given feature in the next.js docs.

I also configured a CNAME record under my domain name

Name: nextjs.portfolio
Data: cname.vercel-dns.com.

Resulting in https://nextjs.portfolio.mikemcmillan.dev

Confusion?

After completing this, I was still left wondering if this framework is littered with other functions that have magic names, such as the getStaticPaths and getStaticProps functions, and the header for API routes.

I’m confused as to what code runs on the client, and what runs on the server. I mean, clearly an API route is hitting the server, but this code is intermingled with the client code as far as I can see. Perhaps there is a coding standard about organising files?

I also needed to learn about how to perform TDD with this framework, and how to separate code according to SOLID.

In addition to all that, I noticed we’ve not even touched typescript yet!

Typescript

First up, let’s figure out how to switch from straight javascript to typescript. Initially I missed the extra tutorial on converting the blog from javascript to typescript.

Create an empty tsconfig.json file in the root of your project.

yarn add typescript @types/react @types/node --dev
yarn dev

Next.js should now have auto populated the tsconfig.json file with defaults.

Follow the rest of that tutorial to see what bits of code needs to change. It’s mostly just ensuring types have been defined.

More Confusion?

Ok, so I’ve read about typescript and react components… but all of these .ts files are just exporting functions. According to the documentation a next.js page IS a react component, so that clears that up.

Popular posts from this blog

Taking a memory dump of a w3wp process

sp_blitzIndex

GitLab Badges