Merge pull request #25 from hackerspace-ntnu/naming-conventions

Rename main route group, enforce naming conventions for layouts and pages

README.md

@@ -86,3 +86,8 @@ We are using [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.
 - To keep the code as consistent as possible use functions for react components or hooks instead of const variables with arrow function syntax. An exception is when using the forwardRef hook or when creating compound components.
 - Only use default export for pages or layouts etc. since it is required by Next.js. For everything else use named exports. This is to make it easier to find the components in the codebase or change them without ending up with different names for the same component.
 - Use `type` instead of `interface` for typescript types. This is to keep the code consistent and to make it easier to read. Aldso `type` is more flexible than `interface` since it can be used for unions and intersections.
+
+### Naming conventions
+
+- All layout components should end with Layout. For example: `DefaultLayout`.
+- All page components should end with Page to make it clear it is a whole page. For example: `AboutPage`.

src/app/[locale]/(dashboard)/about/page.tsx → src/app/[locale]/(default)/about/page.tsx

@@ -12,7 +12,7 @@ export async function generateMetadata({
   };
 }
 
-export default function About({
+export default function AboutPage({
   params: { locale },
 }: {
   params: { locale: string };

src/app/[locale]/(dashboard)/events/page.tsx → src/app/[locale]/(default)/events/page.tsx

@@ -12,7 +12,7 @@ export async function generateMetadata({
   };
 }
 
-export default function Events({
+export default function EventsPage({
   params: { locale },
 }: {
   params: { locale: string };

src/app/[locale]/(dashboard)/layout.tsx → src/app/[locale]/(default)/layout.tsx

@@ -4,15 +4,15 @@ import { Footer } from '@/components/layout/Footer';
 import { Header } from '@/components/layout/Header';
 import { Main } from '@/components/layout/Main';
 
-type DashboardProps = {
+type DefaultLayoutProps = {
   children: React.ReactNode;
   params: { locale: string };
 };
 
-export default function Dashboard({
+export default function DefaultLayout({
   children,
   params: { locale },
-}: DashboardProps) {
+}: DefaultLayoutProps) {
   unstable_setRequestLocale(locale);
   return (
     <>

src/app/[locale]/(dashboard)/news/(header)/layout.tsx → src/app/[locale]/(default)/news/(header)/layout.tsx

@@ -6,15 +6,15 @@ import { Link } from '@/lib/navigation';
 
 import { Button } from '@/components/ui/Button';
 
-type NewsHeaderProps = {
+type NewsHeaderLayoutProps = {
   children: React.ReactNode;
   params: { locale: string };
 };
 
-export default function NewsHeader({
+export default function NewsHeaderLayout({
   children,
   params: { locale },
-}: NewsHeaderProps) {
+}: NewsHeaderLayoutProps) {
   unstable_setRequestLocale(locale);
   const t = useTranslations('news');
   return (

src/app/[locale]/(dashboard)/news/(header)/page.tsx → src/app/[locale]/(default)/news/(header)/page.tsx

@@ -22,7 +22,7 @@ export async function generateMetadata({
   };
 }
 
-export default function News({
+export default function NewsPage({
   params: { locale },
   searchParams,
 }: {

src/app/[locale]/(dashboard)/news/[article]/page.tsx → src/app/[locale]/(default)/news/[article]/page.tsx

@@ -31,7 +31,7 @@ export async function generateMetadata({
   };
 }
 
-export default function Article({
+export default function ArticlePage({
   params,
 }: {
   params: { locale: string; article: string };

src/app/[locale]/(dashboard)/page.tsx → src/app/[locale]/(default)/page.tsx

@@ -1,6 +1,6 @@
 import { unstable_setRequestLocale } from 'next-intl/server';
 
-export default function Home({
+export default function HomePage({
   params: { locale },
 }: {
   params: { locale: string };

src/app/[locale]/layout.tsx

@@ -7,7 +7,7 @@ import { cx } from '@/lib/utils';
 
 import { RootProviders } from '@/components/providers/RootProviders';
 
-type LocalelayoutProps = {
+type LocaleLayoutProps = {
   children: React.ReactNode;
   params: { locale: string };
 };
@@ -30,7 +30,7 @@ export function generateStaticParams() {
 
 export async function generateMetadata({
   params: { locale },
-}: Omit<LocalelayoutProps, 'children'>) {
+}: Omit<LocaleLayoutProps, 'children'>) {
   const t = await getTranslations({ locale, namespace: 'meta' });
 
   return {
@@ -71,10 +71,10 @@ export async function generateMetadata({
   };
 }
 
-export default function Localelayout({
+export default function LocaleLayout({
   children,
   params: { locale },
-}: LocalelayoutProps) {
+}: LocaleLayoutProps) {
   if (!locales.includes(locale)) notFound();
   unstable_setRequestLocale(locale);
   return (

src/app/layout.tsx

@@ -1,9 +1,9 @@
 import '@/styles/globals.css';
 
-type RootlayoutProps = {
+type RootLayoutProps = {
   children: React.ReactNode;
 };
 
-export default function Rootlayout({ children }: RootlayoutProps) {
+export default function RootLayout({ children }: RootLayoutProps) {
   return children;
 }