Overview
In this article, I'll share my experiences and process for migrating my side project, Compiled, to use the app directory of Next 13. This will be my first time trying out the app directory of Next 13, and I'm excited to use it once the app directory becomes stable.
Process
During the migration, I started by reading first page of the docs. As the app directory introduces a new conce way of structuring your pages, with also the addition of server components, I had to relearn new concepts but learning it was an ease overall. After reading the getting started page, I moved straight to the migration guide and began migrating my pages one by one.
Problems Encountered
Migrating Compiled to the Next 13 app directory was smooth, although I encountered some unexplainable error logs that were hard to debug. So, I had to check my code one by one to see where I went wrong.
I also found that there is currently no support for Vercel OG generation in the Next.js beta docs, so if you're currently using it I would suggest to wait a bit longer. Moreover, there isn't yet support for the useParams hook for getting dynamic parameters of a page, so I had to use some hacky ways to get the dynamic parameters of a page.
Using Tailwind in the App Directory
If you're using Tailwind, don't forget to add the app folder directory to your Tailwind config file. Otherwise, you may end up like me, debugging for an hour and getting frustrated as to why Tailwind styles aren't working at all.
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
...
}
Conclusion
In conclusion, migrating a project to use the app directory of Next 13 was smooth however there were challegens that you may encounter such as error logs tha aren't helpful, you may also expect some lack of support on some things while doing your migration, so It's best to migrate once the app directory became fully stable and ready to be used.