Now this is a huge PR so here is a rundown of all the changes.
Next.js migration
Now migrating to Next.js is a huge choice, but given that Create React App has been deprecated in favor of it, I feel like there are some valid reasons to use a framework like Next.js. The primary reason is the tools it provides us with a file-based routing system and easy encapsulation of components using layouts. When using Next.js we don't have to use external libraries for a bunch of different small jobs because it is all built-in.
Now a bonus of course is Server Side Rendering, I am not gonna elaborate too much on it, but in general it is impossible to get good performance in react without it.
There are also a bunch more reasons like the built in Link component which adds prefetching to anchortags, Search Engine Optimalisation and much much more.
Layout
I added the Header with the navbar, and fixed up the footer. They are now fully responsive on all screen sizes and fully accessible. Following correct HTML semantics. Also I added a Main component wrapper for all preceding pages so they are contained within the header and footer and don't over-expand on large screens.
Tooling
I migrated from classnames to clsx. They do exactly the same (provide an easy way to contract class strings), but clsx have a smaller bundle size which is great for when it is used in client components. I also added cva and integrated tailwind-merge with both. cva is a simple way to apply different variants to predefined ui components using parameters. The integration with tailwind-merge makes it so that any conflicting tailwind class that is provided through the classname props or later in cva/clsx will always overwrite the conflict. This makes it easy to have predefined classes without worrying about being able to overwrite them.
i18n
I added Next-intl for internationalisation and set it up correctly for Server Side Generation of the pages during build. It should be easy to internationalise every single page that is added in the future. I have also setup localised pathnames which should be easy to update.
SVGs and icons
I added brand icon svgs as react components aswell as converted the sponsors to svgs i the footer. This improves performance since we are using vector graphics. We are now also using lucide for svg icons instead of react-icons. It is open-source, but this was mostly a change to make it easier to convert components from shadcn/ui to our project.
Shadcn/ui
This is a ui component library where we can copy premade ui components into our project and then CHANGE them how we like. That is the reason I choose to use it. I have already added minor tweaks to the components added so far to make them work with our project. It is based on Radix UI btw.
Build
I added pre-commit hooks for linting and formatting. I also created much stricter rules for the linting and especially for typescript. These can be changed later, but in general I like that when you are using typescript you do it properly and for example avoid "any" types. Also added plugins to prettier to sort tailwind classes and import order.
Docker
Created a Docker Image, and have double checked that everything is working. Next meeting we can create a github action to auto deploy it.
Other
Setup automatic sitemap generation and robots.txt during build.
Migrated from node to bun because it is way faster, especially during Docker build.
Added Next-themes for dark/light mode to avoid a "light mode flash" when refreshing the browser window.
Setup providers for global context of dark mode and i18n.
Added mobile menu
Added some predefined vscode settings and extension recommendations which fixes the tailwindcss extension when using cva or clsx.
Added some default styles to tailwind config and updated the color css variables to work with the tailwind color opacity feature.
Added an env package which adds type safety to env variables.
Setup favicon and all required variants.
Here are some screenshots: (yay 100/100 in Lighthouse, only possible with Next.js :) )
Now this is a huge PR so here is a rundown of all the changes.
Next.js migration
Now migrating to Next.js is a huge choice, but given that Create React App has been deprecated in favor of it, I feel like there are some valid reasons to use a framework like Next.js. The primary reason is the tools it provides us with a file-based routing system and easy encapsulation of components using layouts. When using Next.js we don't have to use external libraries for a bunch of different small jobs because it is all built-in. Now a bonus of course is Server Side Rendering, I am not gonna elaborate too much on it, but in general it is impossible to get good performance in react without it. There are also a bunch more reasons like the built in Link component which adds prefetching to anchortags, Search Engine Optimalisation and much much more.
Layout
I added the Header with the navbar, and fixed up the footer. They are now fully responsive on all screen sizes and fully accessible. Following correct HTML semantics. Also I added a Main component wrapper for all preceding pages so they are contained within the header and footer and don't over-expand on large screens.
Tooling
I migrated from classnames to clsx. They do exactly the same (provide an easy way to contract class strings), but clsx have a smaller bundle size which is great for when it is used in client components. I also added cva and integrated tailwind-merge with both. cva is a simple way to apply different variants to predefined ui components using parameters. The integration with tailwind-merge makes it so that any conflicting tailwind class that is provided through the classname props or later in cva/clsx will always overwrite the conflict. This makes it easy to have predefined classes without worrying about being able to overwrite them.
i18n
I added Next-intl for internationalisation and set it up correctly for Server Side Generation of the pages during build. It should be easy to internationalise every single page that is added in the future. I have also setup localised pathnames which should be easy to update.
SVGs and icons
I added brand icon svgs as react components aswell as converted the sponsors to svgs i the footer. This improves performance since we are using vector graphics. We are now also using lucide for svg icons instead of react-icons. It is open-source, but this was mostly a change to make it easier to convert components from shadcn/ui to our project.
Shadcn/ui
This is a ui component library where we can copy premade ui components into our project and then CHANGE them how we like. That is the reason I choose to use it. I have already added minor tweaks to the components added so far to make them work with our project. It is based on Radix UI btw.
Build
I added pre-commit hooks for linting and formatting. I also created much stricter rules for the linting and especially for typescript. These can be changed later, but in general I like that when you are using typescript you do it properly and for example avoid "any" types. Also added plugins to prettier to sort tailwind classes and import order.
Docker
Created a Docker Image, and have double checked that everything is working. Next meeting we can create a github action to auto deploy it.
Other
Here are some screenshots: (yay 100/100 in Lighthouse, only possible with Next.js :) )
Mobile:
