Rosetta

Rosetta is an opinionated Next.js starter template focused on multi-language routes, built with TypeScript and EmotionCSS and served through a custom Node.js server.

What is Rosetta?

Rosetta is an opinionated boilerplate for Next.js projects that need multi-language routes. It configures a custom server because Next.js stable releases do not yet support the routes Rewrite() feature, and it bundles TypeScript, EmotionCSS, and Nodemon as the starting stack. The template is still heavily under development and not ready for use.

Key Features

• Multi-language routing — Configure the supportedLanguages array to define route slugs, and set defaultLanguage to choose which language is served on the root path.
• Custom server setup — Runs Next.js behind a custom Node.js server to enable multi-language routes before official support is stable.
• TypeScript included — The project is initialized with TypeScript for type-safe application code.
• EmotionCSS styling — Emotion is preconfigured as the styling solution for component-level styles.
• Nodemon development — Use the server-dev task to watch the server code and restart the back-end on changes; note that hot reloading does not work in this mode.
• Four npm scripts — server-dev, dev, build, and start cover development, production compilation, and production serving.

Who is it for?

• Next.js developers who need internationalized routes without waiting for stable Rewrite() support.
• Fullstack teams that want a custom server integrated from the start for server-side logic.
• Developers who prefer an opinionated stack of TypeScript, EmotionCSS, and Nodemon so they can start writing app code immediately.

What can you do with Rosetta?

• Set up a new multilanguage Next.js project: clone the repo, install dependencies, and run yarn dev to get a client-side development server on http://localhost:3000.
• Configure supported languages: edit the supportedLanguages array and defaultLanguage key in the configuration to define which languages get route slugs and which one is served on the root.
• Run fullstack development: use yarn server-dev to develop both client and server code with automatic server restarts (without hot reload).
• Build for production: run yarn build to compile the application, then yarn start to serve the production build.

How does Rosetta work?

Clone the repository, install dependencies with yarn, and run either yarn dev for client-side development or yarn server-dev for fullstack development. The custom server handles language routing based on the supportedLanguages configuration, and the defaultLanguage key controls what is served on the root path.

Pros and cons

• Pros: Preselected stack reduces setup time; language routes are configurable without manually defining each route; TypeScript provides type safety out of the box.
• Cons: Heavily under development and not production-ready; relies on a custom server, which the author explicitly says is not recommended for everyone; the server-dev mode disables hot reloading.

FAQ

Is Rosetta ready for production?

No. The project README states it is heavily under development and not yet ready to be used. The custom server approach also carries tradeoffs that should be evaluated per project, so treat this as an early-stage foundation rather than a production template.

Why does Rosetta use a custom server?

The template runs on a custom server because Next.js stable releases did not support the routes Rewrite() feature at the time it was written. The custom server enables multi-language routes, but the author warns it is definitely not recommended for everyone.

Does Rosetta support hot reloading?

In client-side development mode (yarn dev), Next.js hot reloading works normally. In server development mode (yarn server-dev), changes to the back-end restart the process but hot reloading does not work.

How do I change the default language?

Set the defaultLanguage key in the configuration to the language you want served on the app's root path. The route slugs for each language are taken from the supportedLanguages array.

What stack does Rosetta include?

The template comes with TypeScript for type checking, EmotionCSS for styling, Nodemon for server-side development, and Next.js as the React framework. There is no built-in CMS, auth, or payment integration—it focuses on the routing and development setup.