💿
Remix Starter
A Remix starter with intuitive defaults, like support for internationalization and localized URLs. Coming soon: Authentication and authorization, component documentation, and more!
I built this in literally like 30 minutes to try out Remix. The amazing thing is that today, in 2022, Next.js still doesn't support localized URLs, and it took me a handful of minutes to set this up!
Features
-
📕 Localized URLs by default -
🌎 Dependency-free typed translation - ...more coming soon!
Localized URLs by default
Instead of going to / and /about, your users will always go to /en-ch/ and /en-ch/about (in this example, the language is "English - Switzerland, or en-ch). This is an SEO and i18n best practice, so you have unique URLs based on the language of your content.
Redirection
Users will automatically by redirected to their language of choice. We parse the Accept-Language header and figure out the best language for the user.
Language selection
Users can manually select their preferred language. We remember this in a cookie.
Language recommendation
If your users have followed a link (say, on a search result) and have reached your site's version that we don't think is their preferred language, we show them a recommendation.
Dependency-free typed translation
The app/data/i18n.json contains all your translations. Don't worry, we never bundle the entire file; not even entire scopes — only the translations you actually use on a page are included, so your pages are always fast. You can generate this file using any i18n pipeline.
Screenshot of i18n.json file
First, list the keys you require on a route:
const i18nKeys = ["hello", "world"] as const;
Then, the loader function will fetch the translations in the current language:
const i18nKeys = ["hello", "world"] as const; type I18nKeys = typeof i18nKeys[number]; type LoaderData = { i18n: Record<I18nKeys, string>; products: { name: string }[]; }; export let loader: LoaderFunction = (args): LoaderData => { return { i18n: loadTranslations<I18nKeys>(args.params.locale, i18nKeys), products: [{ name: "Pants" }, { name: "Jacket" }], }; };
Now consume the translations with full type support:
const { products, i18n } = useLoaderData<LoaderData>();
Development
From your terminal:
npm run dev
This starts your app in development mode, rebuilding assets on file changes.
Deployment
First, build your app for production:
npm run build
Then run the app in production mode:
npm start
Now you'll need to pick a host to deploy it to.
DIY
If you're familiar with deploying node applications, the built-in Remix app server is production-ready.
Make sure to deploy the output of remix build
build/public/build/
Using a Template
When you ran npx create-remix@latest there were a few choices for hosting. You can run that again to create a new project, then copy over your app/ folder to the new project that's pre-configured for your target server.
cd ..
# create a new project, and pick a pre-configured host
npx create-remix@latest
cd my-new-remix-app
# remove the new project's app (not the old one!)
rm -rf app
# copy your app over
cp -R ../my-old-remix-app/app app
9.8k Jan 3, 2023
12 May 12, 2021
42 Nov 10, 2022
1 Feb 11, 2022
11 Dec 13, 2022
7 Sep 30, 2022
28 Nov 27, 2022
10 Aug 16, 2022
21.7k Jan 1, 2023
43 Dec 19, 2022
3 Sep 24, 2021
272 Dec 30, 2022
7 Nov 12, 2022
6 Aug 24, 2022
9 Dec 8, 2022
124 Dec 25, 2022
5 Nov 17, 2022
45 Sep 24, 2022