This sample is compatible with Next 10, which introduces support for Internationalized Routing and allows you to setup Translations and Routing in the blink of an eye!

In this project, we provide all the code you need for a personal website with a homepage, information pages, and navigation. Let's see how to set up Prismic to get this up and running.

 
Install the Prismic CLI

Install the command-line tool so that it can be available globally. It allows you to quickly start JavaScript projects that access your Prismic backend.

Make sure to first install npm on your machine, if you don't already have it.

Fire up a terminal (command prompt or similar on Windows) and run the following command.

npm install -g prismic-cli@3.8.3-beta.0

In the terminal, navigate to where you want to launch your project and run the following command.

prismic theme --theme-url https://github.com/prismicio/nextjs-multi-language-site --conf prismic-configuration.js

The prismic theme command will initialize a Next.js project and connect it to your newly created repository. The command will end by displaying a link to your content repository backend in the form of https://your-repo-name.prismic.io.

Using Next.js Internationalized Routing

This project uses Next.js 10 built-in support for internationalized routing and language detection. You can build your site with either subpath routing and domain routing.

For both you just need to update your i18n settings in the next.config.js.

The locales and defaultLocale will match the languages in your new Prismic repo. So. if you modify the languages of your repository make sure you also update them here. Right now your settings right now should look like this:

i18n: {
locales: ['en-us', 'fr-fr'],
defaultLocale: 'en-us',
},

In this example the generated routes would be:

  • / and /en-us for the English master locale
  • /fr-fr for the French locale

Thanks to Next.js Language Detection, the "/" route will be based on the Accept-Language header, which all modern browsers support.

Read Next.js official documentation about Internationalized Routing to learn more.


Run the app

Now it's time to see things working!  Go back to terminal, point it to your project location and run:

npm run dev

This will launch a local development server at http://localhost:3000.
 

Deploys made easy with Vercel

With Prismic and Next, it's incredibly easy to deploy a blazing-fast, dynamic site. Learn how to deploy a statically-generated Next site for free on Vercel in three easy steps:

  1. Sign up to Github and push your project to a new repository
  2. Sign up to Vercel and Import your project
  3. Then just click Deploy, wait a bit for the project to build and then your site will be live!

You may need to add more configuration if you included any statically generated pages in your project. If so, you need to set up webhooks to update those pages when there are changes in your Prismic repo.

To learn more read: Deploy Hooks and the Deployment documentation on the official Vercel docs.

Setup the Preview feature

Follow this link to learn how to handle Previews in NextJS.

Customize to your liking

You should easily find what to modify in the code to customize the website: just edit the stylesheets and the templates to fit your design!

Just curious about the code?

If you aren't interested in recreating this project and would just like to look at the code then you can download the project here.

Did this answer your question?