Migrate (again) to Next.js 13 Pro Max
MarkdownView HTML version
I've been using [Gastby since 2019](/2019/08/migrate-blogger-to-gatsby) and while it's great that I can write my blogs [in NeoVim](/2021/06/neovim.html), commit and push to Github, and have [Cloudflare Pages](/2021/05/migrate-to-cloudflare-pages.html) build and publish to CDN, but I was becoming frustrated with the slow building times and the overall maintenance requirements.
Old blog took 10 minutes to build:
Last month I decided to spend my Sunday migrate my blog to [Next.js](https://nextjs.org) and host it on [Vercel](https://vercel.com).
Next.js has become the standard for modern web development, and as someone who has worked with it before, I felt confident in my ability to use it effectively. You are now reading on the new Next.js blog:
Talk about Vercel instead of Cloudflare Pages or Github Pages,
Vercel is a hosting platform that makes deployment a breeze, with seamless integration with Github.
They are creator of Next.js so they have many opt-in optimization like Turbo Pack build Cache or Vercel Analytics.
I was able to use [rehype and a few plugins](https://github.com/duyet/new-blog/blob/master/lib/markdownToHtml.ts) to parse my old markdown files and convert them to MDX format. My first priority was to make sure that all of the **existing functionality** of my blog remained intact and that the structure was maintained without losing any of the old URLs. After that, I can adding new features like **comments**, **[`/insights`](https://blog.duyet.net/insights)** or [Server Components](https://nextjs.org/docs/getting-started/react-essentials#server-components) became much easier with Next.js and React.js. As a data engineer, I believe that it's important to showcase my work, such as data visualizations.
One of the biggest advantages of Next.js is its **[support for MDX](https://nextjs.org/docs/advanced-features/using-mdx)**, which enables me to customize any blog post by using React components instead of being limited to just markdown.
```tsx
import { MyComponent } from 'my-components'
# My MDX Page with a Layout
This is a list in markdown:
- One
- Two
- Three
Checkout my React component:
<MyComponent/>
```
This functionality opens up a world of possibilities for me, allowing me to create more engaging and interactive content for my readers.
But there's another reason why I'm excited about - built with **Rust-based** technology. This includes the [**swc.rs**](https://swc.rs/) compiler or Vercel's **[Turbo build](https://turbo.build/)**.
Last but not least, the Pagespeed Insights score still remains high, as you can see in this analysis: **[https://pagespeed.web.dev/analysis/https-blog-duyet-net/yosvr0e3d0?form_factor=mobile](https://pagespeed.web.dev/analysis/https-blog-duyet-net/yosvr0e3d0?form_factor=mobile)**
Vercel Speed Insights:
Please find the source code of my Next.js blog here: [https://github.com/duyet/new-blog](https://github.com/duyet/new-blog)
---
### Updates
- **2023-06-05**: Migrate to `/app` router from `/pages`
- **2023-06-08**: Refactor `/app` router using some cool features
- [Nested Route](https://nextjs.org/docs/app/building-your-application/routing/defining-routes) and [Nested Layout](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#nesting-layouts): `/app/[year]/[month]/[slug]`
- [Router Groups](https://nextjs.org/docs/app/building-your-application/routing/route-groups): `/app/(static)/`
- [Parallel Routes](https://nextjs.org/docs/app/building-your-application/routing/parallel-routes): `/app/insights/@cloudflare` and `/app/insights/@wakatime`
- [Server Action](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions): React can now directly call server without building an `/pages/api/`
- [Generate Metadata](https://nextjs.org/docs/app/building-your-application/optimizing/metadata)
- [sitemap.xml](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap)
# References
- [https://github.com/duyet/new-blog](https://github.com/duyet/new-blog)
- [https://nextjs.org](https://nextjs.org)
- [https://turbo.build](https://turbo.build/)
- [https://swc.rs](https://swc.rs)
- [Using MDX with Next.js](https://nextjs.org/docs/advanced-features/using-mdx)