Nx plugin that scaffolds production-ready Expo and Next.js monorepos — consistent structure, module boundaries, Redux/RTK Query, i18n, and code quality out of the box.
Features • Usage • Generators • Contributing
This package provides a set of Nx generators that help maintain a consistent project structure, enforce best practices, and automate common development tasks. It is designed to streamline and standardize the development workflow for monorepos with React Native and/or Next.js apps.
- Automated setup: Quick setup of new projects with pre-configured best practices
- Cross-platform support: Generators for both web (Next.js) and mobile (RN Expo) applications
- Code quality tools: Built-in configuration for ESLint, Prettier, and TypeScript pre-commit checks
- Library management: Tools for creating, moving, renaming, and managing libraries with pre-defined boundaries
- Component generation: Automated creation of components, form interaction, and other utility tools
- Data access setup: State management and API interaction setup using Redux Toolkit and RTKQ Entity API
- Internationalization: Built-in support for i18n in both Next.js and RN Expo applications
See full list of generators below.
The generators enforce several best practices according to Nx concepts:
- Scalable monorepo organization
- Consistent project structure
- Clear libraries hierarchy
- Proper module boundaries
- Streamlined dependency management
- Create a monorepo using Nx Typescript preset:
npx create-nx-workspace my-project --preset=ts --formatter=prettier --linter=eslint --ci=skip- Install this package:
npm i @ronas-it/nx-generators --save-dev- Run generators:
Configure workspace:
npx nx g repo-config && npx nx g code-checksThen run app generators:
Expo app:
npx nx g expo-appNext.js app:
npx nx g next-app- Start the app:
Expo app:
npx nx start mobileNext.js app:
npx nx dev web- Continue developing your app by generating libraries and components:
npx nx g react-lib mobile/account/features/profile-settings --withComponent
npx nx g react-componentNote: each generator accepts the --help argument to see generator instructions. Example: npx nx g react-lib --help.
Also, you can run unit tests using npx nx test nx-generators
Sets up the monorepo structure for development.
Configures code checks and formatting with pre-commit hook.
Generates and configures an Expo React Native app.
Also generates navigation utilities and .easignore file for optimized EAS Build uploads.
-
name(optional) - name of the app forapp.config.ts(e.g:my-app) -
directory(optional) - name of the directory in theapps/folder (e.g:mobile)
npx nx g expo-app --name=my-app --directory=mobileor
npx nx g expo-app my-app mobileGenerates and configures a Next.js app. Also generates navigation utilities.
-
name(optional) - name of the app (e.g:my-app) -
directory(optional) - name of the directory in theapps/folder (e.g:web) -
withNuqs(optional) - installs and configures nuqs for the app
npx nx g next-app --name=my-app --directory=webor
npx nx g next-app my-app webGenerates a library according to Nx notation.
-
app(optional) - name of an app orshared. -
scope(optional) - name of a scope orshared. This option is for a library, related to an app. -
type(optional) - type of library. Possible values arefeatures,data-access,uiandutils. -
name(optional) - name of a library. -
withComponent(optional) - generate the library withlib/component.tsxfile. This option is forfeaturesoruilibrary. -
dryRun(optional) - generate the library without creating files
npx nx g react-lib --app=mobile --scope=account --type=features --name=profile-settings --withComponent --dryRunor
npx nx g react-lib --dryRunRenames an existing library and updates imports
-
currentLibName(optional) - name of the library (e.g.:mobile-account-features-profile-settings) -
newLibName(optional) - new name of the library (e.g.:user-settings, project name will bemobile-account-features-user-settings)
npx nx g lib-rename --currentLibName="mobile-account-features-profile-settings" --newLibName="user-settings"Moves the library to a new destination. This utility also calls lib-tags generator.
-
srcLibName(optional) - name of the library (e.g.:mobile-account-features-profile-settings) -
app(optional) - name of an app orshared. -
scope(optional) - name of a scope orshared. This option is for a library, related to an app. -
type(optional) - type of library. Possible values arefeatures,data-access,uiandutils. -
name(optional) - name of a library.
npx nx g lib-move --srcLibName="mobile-account-features-profile-settings" --app=mobile --scope=settings --type=features --name="user-settings"Removes the library. Before deleting a library you must remove all references to it.
libName(optional) - name of the library (e.g.:mobile-account-features-profile-settings)
npx nx g lib-remove --libName="mobile-account-features-profile-settings"Checks and configures Nx library tags. If your project does not already use library tags, you can add them using this generator.
-
silent(optional) - disables all logs -
skipRepoCheck(optional) - disables check repository status
npx nx g lib-tagsCreates a React component in particular library.
-
name(optional) - name of the component (e.g. AppButton) -
subcomponent(optional) - generate a folder for components
npx nx g react-component --name=AppButton --subcomponentor
npx nx g react-component AppButton --subcomponentGenerates a form schema class and adds its usage to a component or a hook.
-
name(optional) - name of the form (e.g:profile-settings) -
placeOfUse(optional) - name of the component or hook, where the form should be (e.g:ProfileSettingsoruseProfileSettings)
npx nx g form --name=profile-settings --placeOfUse=ProfileSettingsor
npx nx g form profile-settings ProfileSettingsCreates an API with related entities in API library. It also updates redux store middlewares, reducers.
-
name(optional) - name of the entity (e.g. User) -
baseEndpoint(optional) - name of used endpoint in your API (e.g. /users)
npx nx g entity-api --name=User --baseEndpoint=usersCreates Sentry integration for Expo/Next application.
-
directory(optional) - the application directory that uses Sentry -
dsn(optional) - Data Source Name of your Sentry project
npx nx g sentry --directory=apps/mobile --dsn=http://your-dsn.ingest.sentry.io/112233Generates a deployment-ready Dockerfile for Next.js applications in the monorepo.
Generates authentication setup module for Expo/Next application.
-
directory- the application directory -
type- application type, can benext-apporexpo-app
npx nx g auth --directory=mobile --type=expo-appInstalls nuqs and adds the NuqsAdapter to a
Next.js application.
If a providers.tsx file already exists, the adapter is added there.
If it doesn't exist yet, the NuqsAdapter is added directly to layout.tsx.
Can be run standalone, or as part of next-app by answering "yes" to the query
parameters prompt.
directory- the application directory
npx nx g nuqs --directory=webThe generators next-app and expo-app also create customizable utilities for navigation
and empty navigationConfig - an object, where routes should be stored.
There are utilities, which may help to create routes
It's a function for building URLs based on a base path and optional query parameters.
Library - navigation.
basePath— the initial URL. It may contain placeholders for dynamic substitution (e.g.,[id]).
() => string or (args?: TRootParams) => string - a function that constructs a URL by replacing placeholders in the basePath
with values from an optional args object and appends query parameters.
export class ItemSearchParams {
@Expose()
public categoryId?: number;
@Expose()
public tags?: Array<string>;
}
const navigationConfig = {
routes: {
items: getLinkBuilder<ItemSearchParams>('/items'),
},
};
// /items
const allItemsLink = navigationConfig.routes.items();
// /items?categoryId=1&tags=fiction&tags=newest
const filteredItemsLink = navigationConfig.routes.items({
categoryId: 1,
tags: ['fiction', 'newest'],
});It's a function that generates an object of URL paths related to a specific resource:
list, single view, creation, and editing.
Library - navigation.
basePath- the root path for the resource.options(optional) - an object to enable additional paths.withCreation(optional) includes a path for creation a new resource.withEditing(optional) includes a path for editing an existing resource.
ResourcePaths<TRootParams> - an object containing URL path builders for various resource operations:
list- a function to generate the listing URL, supporting query parameters like a result of getLinkBuilder.view- a function to generate a URL for viewing a specific resource by its id.create(optional) - URL string for the creation page, ifwithCreationis enabled.edit(optional) - a function to generate a URL for editing a specific resource by its id, ifwithEditingis enabled.
export class ItemSearchParams {
@Expose()
public categoryId?: number;
@Expose()
public tags?: Array<string>;
}
const navigationConfig = {
routes: {
items: getResourcePaths<ItemSearchParams>('/items', {
withCreation: true,
withEditing: true,
}),
},
};
const allItemsLink = navigationConfig.routes.items.list(); // /items
const filteredItemsLink = navigationConfig.routes.items.list({
// /items?categoryId=1&tags=fiction&tags=newest
categoryId: 1,
tags: ['fiction', 'newest'],
});
const viewLink = navigationConfig.routes.items.view(1); // /items/1
const creationLink = navigationConfig.routes.items.create; // /items/create
const editingLink = navigationConfig.routes.items.edit?.(1); // /items/1/edit