Personal Portfolio - Frontend Developer & UX/UI Product Designer

Community Showcase & Announcements
, ,
1

Multi lang website with App router from Next.js 14, deployed on Vercel. I will be curious to see other projects with the same configuration.

  1. Website URL
    https://www.nicolas-fiascaro.com/

  2. A screen shot of the site

    image
    image2940×1672 264 KB

  3. Technologies used
    CMS: Prismic
    Framework: Next.js | Tailwind
    Motion: ReactFramer
    Hosting: Vercel

  4. Industry
    Design

  5. Utilizes Slice Machine?
    Absolutely

  6. Time to build
    Severals days for the main structure. And iterate on some edge cases

  7. An interesting feature or challenge you solved for
    It seems that Next.js projects with multi lang and app router are not so common!
    And keeping a dark mode in the user session without glitches is not as simple as we think !

1 Like
2

Looks awesome, thank you for sharing!
I just visited it again today, and it looks like it's 404ing, you might want to have a look at what broke :slight_smile:

Definitely noting this for a futur tutorial from the team! Thanks for the idea!

3

Hi @nouha.chhih
Thanks for your feedback and i'm curious to know how you get the 404.
Because normally there is a redirection made in nextjs middleware, handled by a function made by the prismic team, here : feat: add `createLocaleRedirect()` to simplify i18n routing by angeloashmore · Pull Request #89 · prismicio/prismic-next · GitHub

Can you visit here without 404 ? https://www.nicolas-fiascaro.com/en-us

i actually follow a blog post about this topic: Next.js Internationalization (i18n) Tutorial [App Router]

Best,

4

Hey @Nicoolas

Yes https://www.nicolas-fiascaro.com/en-us works fine! Maybe @Levi or @Phil can help you out with this one!

1 Like
6

Hi Nicolas,

I'm not sure off the top of my head as to why your root URL isn't redirecting, I would need to see your code to investigate.

If you compare your project to our sample project it might help you debug :slight_smile:

Thanks.

7

Hi @Phil ,

Honestly i have already check and i don't find differences.
But on my differents browsers i have the redirection on the root url, with private mode or session cleared, it's confusing.
You can find my code here : GitHub - Cocola/nf-nextjs-prismic: Personal website

Thanks

8

Maybe try the custom middleware to see if that changes anything:

// ./src/middleware.ts

import { NextRequest, NextResponse } from 'next/server';
import { createClient } from '@/prismicio';

export async function middleware(request: NextRequest) {
  const client = createClient();
  const repository = await client.getRepository();

  const locales = repository.languages.map((lang) => lang.id);
  const defaultLocale = locales[0];

  // Check if there is any supported locale in the pathname
  const { pathname } = request.nextUrl;

  const pathnameIsMissingLocale = locales.every(
    (locale) => !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`
  );

  // Redirect to default locale if there is no supported locale prefix
  if (pathnameIsMissingLocale) {
    return NextResponse.rewrite(
      new URL(`/${defaultLocale}${pathname}`, request.url)
    );
  }
}

export const config = {
	// Don’t change the URL of Next.js assets starting with _next
  matcher: ['/((?!_next).*)'],
};
1 Like
9

It works ! thank you @Phil !

1 Like