TL;DR: I used this video and this next.js migration guide to upgrade this project to use app router.

Migrating to NextJS 13

I have recently come back to this project after a long pause! Throughout this, several things have changed about Next.js. Only one other library has made such a radical change like this: discord.js. However, unlike discord.js, next.js had an actually useful update.

For this project, I had to do these upgrades:

1. Move project folders to src/ directory
2. Move from using JS to TS
3. Upgrade next.js to v13 and use app router.

Moving project folders

Moving folders to the src/ directory will make things more organized, however don't move the public/ folder! That has to be in the root.

From this point on, I created a separate test nextjs project to compare code. I used npx create-next-app and chose to use typescript.

Moving from JS to TS

I first installed a few modules.

npm i typescript
npm i -D @types/node @types/react @types/showdown

Then, I copied the tsconfig.json from the other project to this project.

Finally, I had to put in types. One type that was especially useful was React.ComponentPropsWithoutRef<T> which helps type the ...props pattern. Using an union type, we can do something like:

function Card({ title, ...props }: { title: string } & React.ComponentPropsWithoutRef<"div">) {
    return (
        <div {...props}>{title}</div>
    );
}

You can read more here and here.

Note: I also found that there was React.ComponentProps which is shorter to type, but it seems that it's not as specific as React.ComponentPropsWithoutRef or React.ComponentPropsWithRef. I guess it's bad practice?

Really side note: During this step, I also updated some eslint rules, and discovered I could use React without importing it! I think this is some Next.js magic, because VSCode gets the type hints correctly. This was an article I found. It doesn't seem like the next template is importing it, and so I won't bother. Typescript will warn me of unused variables so it's fine.

Using App Router

This was obviously the hardest part. However, it wasn't actually that bad! At first, when I saw what next.js apps looked like, I didn't think it was next.js! However, upon closer inspection, it's much simpler than you think! One thing that really helped me was this video.

First, I created an app/ folder. Each folder is a route, so I had to create new folders for each file I had. Then, I had to define layout.tsx. Like the tsconfig.json, I just copied from a new next.js project I created in a separate folder.

There was a super convenient next/font/google module, and it greatly simplified using fonts! Before I knew about this, I had to install the font locally and put it in globals.css.

getServerSideProps and getStaticProps are now much simpler. This greatly simplified the blog pages.

Finally, I removed the pages/ folder altogether, with _app.tsx! Good bye pages.

Conclusion

Migrating and upgrading is definitely a task that seems difficult at first, but it turned out to be super convenient and now I understand next.js better! As a bonus, the website should run faster (but it's already fast)!