feat: migrate to App Router architecture

Author: jeremieP

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.js

@@ -1,16 +1,14 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  // Next.js 15 now uses app directory by default
-  // We're keeping pages directory for backward compatibility
-  // but can migrate to app directory later
+  // Explicitly enable the App Router
+  experimental: {
+    appDir: true
+  },
   eslint: {
     ignoreDuringBuilds: true,
   },
-  // Modern i18n config
-  i18n: {
-    locales: ['fr'],
-    defaultLocale: 'fr',
-  }
+  // Replace legacy i18n config with newer approach
+  // (i18n is now handled in app/[locale] structure or middleware)
 }
 
 module.exports = nextConfig

src/app/fr/layout.tsx

@@ -0,0 +1,16 @@
+import { getLoggedUserId } from '../../utils/getLoggedUserId'
+
+// Default way to get a logged user
+export const loggedUserId = getLoggedUserId()
+
+export default function FrLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div className="min-h-screen p-2 flex flex-col justify-center items-center">
+      {children}
+    </div>
+  )
+}

src/app/fr/page.tsx

@@ -0,0 +1,57 @@
+import Image from 'next/image'
+import Logo from '../assets/lbc-logo.webp'
+
+export default function Home() {
+  const year = new Date().getFullYear()
+
+  return (
+    <>
+      <main className="p-4 md:p-16 flex-1 flex flex-col justify-center items-center">
+        <Image src={Logo} alt="Leboncoin Frontend Team" width={400} height={125} priority />
+        <h1 className="mt-8 mb-4 text-4xl font-bold text-center">
+          Welcome !
+        </h1>
+
+        <p className="text-xl leading-relaxed text-center">
+          This test is based on a <a className="text-black underline hover:text-[--color-leboncoin-orange]" title="Next.js documentation" href="https://nextjs.org/docs/getting-started" target="_blank" rel="noopener noreferrer">Next.js</a> application.<br />
+          Fork the repository and use the <code className="bg-gray-200 rounded px-1 py-0.5 text-base font-mono">main</code> branch as your starting point.
+          <br /><br />
+
+          Get started by reading{' '}
+          <code className="bg-gray-200 rounded px-1 py-0.5 text-base font-mono">README.md</code> and editing <code className="bg-gray-200 rounded px-1 py-0.5 text-base font-mono">src/app/page.tsx</code>
+          <br />
+          Once you are done, send the repository link to your HR contact.
+        </p>
+
+        <div className="flex flex-wrap justify-center items-center max-w-4xl mt-4 w-full">
+          <article className="m-2 flex-[45%] p-6 text-left border border-gray-200 rounded-lg transition-colors hover:border-leboncoin-orange hover:text-leboncoin-orange">
+            <h2 className="mb-4 text-2xl font-bold">Design</h2>
+            <p className="text-lg leading-relaxed">Feel free to create any design you want for this exercise. Let your creativity talks !</p>
+          </article>
+
+          <article className="m-2 flex-[45%] p-6 text-left border border-gray-200 rounded-lg transition-colors hover:border-leboncoin-orange hover:text-leboncoin-orange">
+            <h2 className="mb-4 text-2xl font-bold">Libraries</h2>
+            <p className="text-lg leading-relaxed">Feel free to use any library you want. Only Next.js / React are required.</p>
+          </article>
+
+          <article className="m-2 flex-[45%] p-6 text-left border border-gray-200 rounded-lg transition-colors hover:border-leboncoin-orange hover:text-leboncoin-orange">
+            <h2 className="mb-4 text-2xl font-bold">API Server</h2>
+            <p className="text-lg leading-relaxed">
+              Start the API server on port <code className="bg-gray-200 rounded px-1 py-0.5 text-base font-mono">3005</code> by running<br /><code className="bg-gray-200 rounded px-1 py-0.5 text-base font-mono">npm run start-server</code>.<br/>
+              Find the swagger definitions in <code className="bg-gray-200 rounded px-1 py-0.5 text-base font-mono">docs/api-swagger.yml</code> or <a className="text-black underline hover:text-[--color-leboncoin-orange]" title="API Swagger documentation" href="https://leboncoin.tech/frontend-technical-test/" target="_blank" rel="noopener noreferrer">the online documentation</a>.
+            </p>
+          </article>
+
+          <article className="m-2 flex-[45%] p-6 text-left border border-gray-200 rounded-lg transition-colors hover:border-leboncoin-orange hover:text-leboncoin-orange">
+            <h2 className="mb-4 text-2xl font-bold">Timing</h2>
+            <p className="text-lg leading-relaxed">We recommend 4 hours for this test. You are free to spend more (or less) time, let us know how much time did you spend.</p>
+          </article>
+        </div>
+      </main>
+
+      <footer className="w-full h-[50px] border-t border-gray-200 flex justify-center items-center">
+        &copy; leboncoin - {year}
+      </footer>
+    </>
+  )
+}

src/app/layout.tsx

@@ -0,0 +1,24 @@
+import '../styles/globals.css'
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: {
+    default: 'Frontend Technical test - Leboncoin',
+    template: '%s | Leboncoin',
+  },
+  description: 'Frontend exercise for developpers who want to join us on leboncoin.fr',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="fr">
+      <body>
+        {children}
+      </body>
+    </html>
+  )
+}

src/app/not-found.tsx

@@ -0,0 +1,13 @@
+import Link from 'next/link'
+ 
+export default function NotFound() {
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center">
+      <h2 className="text-4xl font-bold mb-4">Page not found</h2>
+      <p className="text-lg mb-6">The page you are looking for does not exist.</p>
+      <Link href="/fr" className="px-6 py-3 bg-[--color-leboncoin-orange] text-white rounded hover:opacity-90">
+        Return to home page
+      </Link>
+    </div>
+  )
+}

src/middleware.ts

@@ -0,0 +1,40 @@
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+// This middleware handles internationalization for the App Router
+// It sets the default locale to 'fr'
+export function middleware(request: NextRequest) {
+  // Get the pathname from the request
+  const pathname = request.nextUrl.pathname
+
+  // Set locale to 'fr' (the default and only supported locale)
+  const locale = 'fr'
+
+  // Skip internationalization middleware for API routes and static assets
+  if (
+    pathname.startsWith('/api') ||
+    pathname.startsWith('/_next') ||
+    pathname.includes('/.')
+  ) {
+    return NextResponse.next()
+  }
+
+  // The locale is already in the pathname, skip
+  if (pathname.startsWith(`/${locale}`)) {
+    return NextResponse.next()
+  }
+
+  // Redirect to the path with the locale prefix (e.g. /fr/about)
+  // In this case, since 'fr' is the only locale, we always redirect to /fr/...
+  return NextResponse.redirect(
+    new URL(`/${locale}${pathname}`, request.url)
+  )
+}
+
+// Configure the middleware to run on specific paths
+export const config = {
+  // Match all routes except for api routes, static files, etc.
+  matcher: [
+    '/((?!api|_next/static|_next/image|favicon.ico|.*\\..*|_vercel).*)',
+  ],
+}