This project provides 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.
1. Launch the project
First, Install the prismic-cli package. Launch a terminal instance and run the following command to install the package globally.
npm install -g prismic-cli
Sometimes it's possible that this command doesn't work. If that's the case for you, try executing a sudo command:
sudo npm install -g prismic-cli
⚠️ Prismic CLI version
Make sure you're using the latest version of the CLI, which you can check on npm; otherwise, the theme command won't add any Custom Types or Content correctly to the newly created repository.
Check your version by running
prismic --version command in your terminal.
Once it's been installed, navigate where you want to create your new project folder and run the following command:
prismic theme --theme-url https://github.com/prismicio/nextjs-multi-language-site --conf prismic-configuration.js
This will create a new Prismic content repository, set up the custom types, create a few documents, and install the project code.
2. Using Next.js Internationalized Routing
For both, you need to update your i18n settings in the
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 should look like this:
locales: ['en-us', 'fr-fr'],
In this example, the generated routes would be:
/en-usfor the English master locale
/fr-frfor 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.
3. Run the website
Now it's time to see things working! Go back to the terminal, point it to your project location, and run:
npm run dev
This will launch a local development server at http://localhost:3000.
4. Deploys made easy with Vercel
With Prismic and Next, it's straightforward to deploy a blazing-fast, dynamic site. Learn how to deploy a statically-generated Next site for free on Vercel in three easy steps:
- Sign up to Github and push your project to a new repository
- Sign up to Vercel and Import your project
- Then click Deploy, wait a bit for the project to build, and then your site will be live!
You might 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.
Customize to your liking
You should easily find what to modify in the code to customize the website: edit the stylesheets and the templates to fit your design!