Merge pull request #70 from hackerspace-ntnu/nextjs-15

Nextjs 15

.env.example

@@ -12,6 +12,7 @@
 
 # General
 NODE_ENV="development"
+NODE_OPTIONS="--max_old_space_size=16384"
 NEXT_TELEMETRY_DISABLED="true"
 NEXT_PUBLIC_SITE_URL="http://localhost:3000"
 

.github/workflows/code-quality.yml

@@ -21,6 +21,7 @@ jobs:
     name: Performance Audit
     runs-on: ubuntu-latest
     env:
+      CI: true
       NEXT_TELEMETRY_DISABLED: true
       NODE_ENV: "production"
       DATABASE_HOST: "localhost"

CONTRIBUTING.md

@@ -79,9 +79,10 @@ Here is a list of documentations that will help you contribute to the project:
 - [Next.js](https://nextjs.org/docs) - Framework for routing and server-side rendering
 - [Next-intl](https://next-intl-docs.vercel.app/) - Internationalization library
 - [nuqs](https://nuqs.47ng.com/docs/installation) - Easy to use query params
-- [BlockNote](https://www.blocknotejs.org/docs) - Tool for markdown textboxes
-- [React Hook Form](https://react-hook-form.com/get-started) - When we need to handle form validation
+- [Plate](https://platejs.org) - Tool for rich text editing
 - [Tanstack Query](https://tanstack.com/query/latest/docs/framework/react/overview) - TRPC wraps Tanstack Query which is how we fetch data from the backend
+- [Tanstack Table](https://tanstack.com/table/latest/docs/introduction) - For dynamic tables with filtering, sorting, pagination etc
+- [Tanstack Form](https://tanstack.com/form/latest/docs/overview) - When we need to handle form validation
 
 #### Styling
 

Dockerfile

@@ -17,6 +17,7 @@ WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
+ENV CI=true
 ENV NODE_ENV=production
 ENV SKIP_ENV_VALIDATION=true
 
@@ -27,6 +28,7 @@ RUN bun run build
 FROM base AS runner
 WORKDIR /app
 
+ENV CI=true
 ENV NODE_ENV=production
 ENV NEXT_TELEMETRY_DISABLED=true
 ENV SKIP_ENV_VALIDATION=true

README.md

@@ -2,7 +2,7 @@
 
 The overhauled website for the [Hackerspace NTNU](https://www.hackerspace-ntnu.no/) student organization.
 
-## Did you encouter an issue with the website?
+## Did you encounter an issue with the website?
 
 Please report it as an [issue](https://github.com/hackerspace-ntnu/website-next/issues)!
 

drizzle.config.ts

@@ -1,10 +1,12 @@
 import { env } from '@/env';
 import { defineConfig } from 'drizzle-kit';
 
-export default defineConfig({
+const config = defineConfig({
   schema: './src/server/db/schema/*.ts',
   dialect: 'postgresql',
   dbCredentials: {
     url: `postgresql://${env.DATABASE_USER}:${env.DATABASE_PASSWORD}@${env.DATABASE_HOST}:${env.DATABASE_PORT}/${env.DATABASE_NAME}`,
   },
 });
+
+export default config;

lighthouserc.cjs

@@ -2,7 +2,7 @@ const PAGES_EXCLUDED = ['news', 'storage'];
 
 // Do not convert into an ES6 export.
 // lighthouse-ci (as of 0.14.0) uses require() to import, and this is not supported with ES6 modules.
-module.exports = {
+const config = {
   ci: {
     collect: {
       url: [
@@ -31,6 +31,7 @@ module.exports = {
             'heading-order': 'off',
             'largest-contentful-paint': 'off',
             'render-blocking-resources': 'off',
+            'target-size': 'off',
           },
         },
         {
@@ -42,8 +43,12 @@ module.exports = {
             'heading-order': 'off',
             'largest-contentful-paint': 'off',
             'render-blocking-resources': 'off',
+            'target-size': 'off',
             interactive: 'off',
             'uses-responsive-images': 'off', // Should be removed when we obtain images from backend
+            'image-aspect-ratio': 'off', // Should be removed when we obtain images from backend
+            'image-size-responsive': 'off', // Should be removed when we obtain images from backend
+            'max-potential-fid': 'off',
           },
         },
         {
@@ -55,12 +60,16 @@ module.exports = {
             'heading-order': 'off',
             'largest-contentful-paint': 'off',
             'render-blocking-resources': 'off',
+            'target-size': 'off',
             'unused-javascript': 'off',
             'cumulative-layout-shift': 'off', // We don't always know how many items are in the cart, which can lead to layout shifts when loading completes
             'max-potential-fid': 'off',
+            'image-aspect-ratio': 'off', // Should be removed when we obtain images from backend
           },
         },
       ],
     },
   },
 };
+
+module.exports = config;

messages/en.json

@@ -12,7 +12,16 @@
     "page": "page",
     "category": "category",
     "sort": "sort",
-    "photoOf": "Photo of {name}"
+    "photoOf": "Photo of {name}",
+    "today": "Today",
+    "selected": "Selected",
+    "week": "Week",
+    "nextMonth": "Next month",
+    "previousMonth": "Previous month",
+    "selectMonth": "Select month",
+    "selectYear": "Select year",
+    "pickDate": "Pick a date",
+    "dateFormat": "dd/MM/yyyy"
   },
   "error": {
     "notFound": "404 - Page not found",

messages/no.json

@@ -12,7 +12,16 @@
     "page": "side",
     "category": "kategori",
     "sort": "sortering",
-    "photoOf": "Bilde av {name}"
+    "photoOf": "Bilde av {name}",
+    "today": "I dag",
+    "selected": "Valgt",
+    "week": "Uke",
+    "nextMonth": "Neste måned",
+    "previousMonth": "Forrige måned",
+    "selectMonth": "Velg måned",
+    "selectYear": "Velg år",
+    "pickDate": "Velg en dato",
+    "dateFormat": "dd.MM.yyyy"
   },
   "error": {
     "notFound": "404 - Siden ble ikke funnet",

next.config.js → next.config.ts

@@ -1,10 +1,9 @@
+import type { NextConfig } from 'next';
 import nextIntl from 'next-intl/plugin';
-await import('./src/env.js');
 
 const withNextIntl = nextIntl('./src/lib/locale/request.ts');
 
-/** @type {import("next").NextConfig} */
-const config = {
+const config: NextConfig = {
   reactStrictMode: true,
   output: 'standalone',
 };

package.json

@@ -4,12 +4,12 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "prepare": "if [ \"$NODE_ENV\" != \"production\" ]; then lefthook install; fi",
-    "dev": "next dev",
+    "prepare": "lefthook install",
+    "dev": "next dev --turbopack",
     "lint": "biome check --write",
     "prebuild": "next telemetry disable",
     "build": "next build",
-    "postbuild": "next-sitemap && mkdir -p .next/standalone/public .next/standalone/.next/static && cp -r public/* .next/standalone/public && cp -r .next/static/* .next/standalone/.next/static",
+    "postbuild": "mkdir -p .next/standalone/public .next/standalone/.next/static && cp -r public/* .next/standalone/public && cp -r .next/static/* .next/standalone/.next/static",
     "start": "bun run .next/standalone/server.js",
     "db:start": "docker-compose up db",
     "db:generate": "drizzle-kit generate",
@@ -20,19 +20,21 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.637.0",
-    "@hookform/resolvers": "^3.9.0",
     "@lucia-auth/adapter-drizzle": "^1.1.0",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.1",
     "@t3-oss/env-nextjs": "^0.10.1",
+    "@tanstack/react-form": "^0.34.1",
     "@tanstack/react-query": "^5.53.1",
+    "@tanstack/zod-form-adapter": "^0.34.1",
     "@trpc/client": "^11.0.0-rc.490",
     "@trpc/react-query": "^11.0.0-rc.490",
     "@trpc/server": "^11.0.0-rc.490",
@@ -43,33 +45,31 @@
     "drizzle-orm": "^0.33.0",
     "lucia": "^3.2.0",
     "lucide-react": "^0.396.0",
-    "next": "^14.2.10",
-    "next-intl": "^3.18.1",
-    "next-themes": "^0.3.0",
-    "nuqs": "^1.17.4",
+    "next": "15.0.1",
+    "next-intl": "^3.23.5",
+    "next-themes": "1.0.0-beta.0",
+    "nuqs": "^2.0.4",
     "postgres": "^3.4.4",
-    "react": "^18.3.1",
-    "react-day-picker": "8.10.1",
-    "react-dom": "^18.3.1",
-    "react-hook-form": "^7.53.0",
+    "react": "19.0.0-rc-69d4b800-20241021",
+    "react-day-picker": "^9.1.4",
+    "react-dom": "19.0.0-rc-69d4b800-20241021",
     "reading-time": "^1.5.0",
-    "sharp": "^0.33.4",
     "superjson": "^2.2.1",
     "tailwind-merge": "^2.5.2",
+    "vaul": "^1.1.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.1",
     "@fluid-tailwind/tailwind-merge": "^0.0.2",
     "@types/node": "^20.14.8",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "npm:[email protected]",
+    "@types/react-dom": "npm:[email protected]",
     "autoprefixer": "^10.4.20",
     "client-only": "^0.0.1",
     "drizzle-kit": "^0.24.1",
     "fluid-tailwind": "^1.0.3",
     "lefthook": "^1.7.14",
-    "next-sitemap": "^4.2.3",
     "postcss": "^8.4.38",
     "server-only": "^0.0.1",
     "tailwind-scrollbar": "^3.1.0",
@@ -78,5 +78,9 @@
     "tailwindcss-radix": "^3.0.5",
     "typescript": "^5.5.0"
   },
+  "overrides": {
+    "@types/react": "npm:[email protected]",
+    "@types/react-dom": "npm:[email protected]"
+  },
   "packageManager": "[email protected]"
 }

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

@@ -1,22 +1,25 @@
-import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 
 export async function generateMetadata({
-  params: { locale },
+  params,
 }: {
-  params: { locale: string };
+  params: Promise<{ locale: string }>;
 }) {
+  const { locale } = await params;
+
   const t = await getTranslations({ locale, namespace: 'layout' });
 
   return {
     title: t('about'),
   };
 }
 
-export default function AboutPage({
-  params: { locale },
+export default async function AboutPage({
+  params,
 }: {
-  params: { locale: string };
+  params: Promise<{ locale: string }>;
 }) {
-  unstable_setRequestLocale(locale);
+  const { locale } = await params;
+  setRequestLocale(locale);
   return <div>this should be about page</div>;
 }

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

@@ -1,22 +1,25 @@
-import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 
 export async function generateMetadata({
-  params: { locale },
+  params,
 }: {
-  params: { locale: string };
+  params: Promise<{ locale: string }>;
 }) {
+  const { locale } = await params;
+
   const t = await getTranslations({ locale, namespace: 'layout' });
 
   return {
     title: t('events'),
   };
 }
 
-export default function EventsPage({
-  params: { locale },
+export default async function EventsPage({
+  params,
 }: {
-  params: { locale: string };
+  params: Promise<{ locale: string }>;
 }) {
-  unstable_setRequestLocale(locale);
+  const { locale } = await params;
+  setRequestLocale(locale);
   return <div>This should be events page</div>;
 }

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

@@ -1,18 +1,21 @@
 import { Footer } from '@/components/layout/Footer';
 import { Header } from '@/components/layout/Header';
 import { Main } from '@/components/layout/Main';
-import { unstable_setRequestLocale } from 'next-intl/server';
+import { setRequestLocale } from 'next-intl/server';
 
 type DefaultLayoutProps = {
   children: React.ReactNode;
-  params: { locale: string };
+  params: Promise<{ locale: string }>;
 };
 
-export default function DefaultLayout({
-  children,
-  params: { locale },
-}: DefaultLayoutProps) {
-  unstable_setRequestLocale(locale);
+export default async function DefaultLayout(props: DefaultLayoutProps) {
+  const params = await props.params;
+
+  const { locale } = params;
+
+  const { children } = props;
+
+  setRequestLocale(locale);
   return (
     <>
       <Header />

src/app/[locale]/(default)/news/(main)/layout.tsx

@@ -1,22 +1,23 @@
 import { SquarePenIcon } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { unstable_setRequestLocale } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 
 import { Link } from '@/lib/locale/navigation';
 
 import { Button } from '@/components/ui/Button';
 
 type NewsHeaderLayoutProps = {
   children: React.ReactNode;
-  params: { locale: string };
+  params: Promise<{ locale: string }>;
 };
 
-export default function NewsHeaderLayout({
+export default async function NewsHeaderLayout({
+  params,
   children,
-  params: { locale },
 }: NewsHeaderLayoutProps) {
-  unstable_setRequestLocale(locale);
-  const t = useTranslations('news');
+  const { locale } = await params;
+
+  setRequestLocale(locale);
+  const t = await getTranslations('news');
   return (
     <>
       <div className='flex items-center justify-between'>