شما با دستور زیر به صورت عمومی میتوانید ان ایکس را ایجاد نمایید:
npm install -g nx
npx create-nx-workspace@latest --preset=next # In add new next app by running the following command: nx g @nx/next:app my-next-app
✔ Where would you like to create your workspace? · my-workspace
✔ Application name · nextjs-user
✔ Would you like to use the App Router (recommended)? · No
✔ Would you like to use the src/ directory? · Yes
✔ Test runner to use for end to end (E2E) tests · cypress
✔ Default stylesheet format · @emotion/styled
✔ Do you want Nx Cloud to make your CI fast? · skip
after install next js ap
nx g @nx/react:app my-react-app
Replace my-react-app with your application name.
✔ Which stylesheet format would you like to use? · @emotion/styled
✔ Would you like to add React Router to this application? (y/N) · true
✔ Which E2E test runner would you like to use? · cypress
✔ Which bundler do you want to use to build the application? · webpack
✔ What should be the project name and where should it be generated? · react-admin @ apps/react-admin
به دایرکتوری پروژه خود میرویم:
cd apps/my-react-app npm install @mui/material @emotion/react @emotion/styled
نصب tailwind
cd apps/my-next-app npm install tailwindcss postcss autoprefixer npx tailwindcss init -p
تنظیمات tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
darkMode: 'class',
theme: {
extend: {},
},
plugins: [require('autoprefixer')],
};
دستورا زیر رو به فایل اصلی استایل خود که درون پروژه ادد شده است اضافه کنید
@tailwind base;
@tailwind components;
@tailwind utilities;
مورادی که ممکنه به شما در این بخش کمک میکند:
nx graphnx g @nx/next:lib my-next-lib # for remove workspace nx g @nrwl/workspace:remove --project=my-next-lib
nx g @nrwl/react:lib ui-shared nx g @nrwl/react:component ui-shared/src/my-shared-component --project=ui-shared --export usage all react base project: import { MySharedComponent } from '@myorg/ui-shared';
nx add @nx/storybook
برای ست کردن تنظیمات هاسکی روی هر پروژه به صورت زیر انجام میشود:
nx g @nx/storybook:configuration my-next-app --uiFramework=@storybook/nextjs nx g @nx/storybook:configuration my-react-app --uiFramework=@storybook/react nx g @nx/storybook:configuration my-next-lib --uiFramework=@storybook/react nx g @nrwl/react:storybook-configuration ui-shared
nx g @nrwl/react:storybook-configuration ui-shared run: nx run ui-shared:storybook
✔ Do you want to set up Storybook interaction tests? (Y/n) · false
✔ Automatically generate *.stories.ts files for components declared in this project? (Y/n) · true
✔ Configure a static file server for the storybook instance? (Y/n) · true
Serve :
nx run project-name:storybook
or:
nx storybook my-next-app
Build Storybook using this command:
nx run my-next-app:build-storybook
or
nx build-storybook my-next-app
With the Storybook server running, you can test Storybook (run all the interaction tests) using this command:
nx run my-next-app:test-storybook
or
nx test-storybook my-next-app
We install and init Husky with:
npx husky-init && npm install
This will also add a prepare script in the package.json:
"prepare": "husky install"
Setting up lint-staged
We first need to set up lint-staged:
npm install --save-dev lint-staged
Let’s go ahead and use lint-staged to run lint and formatting before committing.
Setting up the hook
We create a .lintstagedrc to run commands on staged files:
{ "*.ts": ["nx affected:lint --fix --files"],
"*": ["npx nx format:write --files"],
"*.scss": ["npx stylelint --fix"] }
We make a pre-commit hook that triggers stage-lint:
npx husky add .husky/pre-commit 'npx lint-staged –relative'
This gives us:
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged --relative
We use --relative so lint-staged will apply the paths of the staged files as relative paths which we need for nx format:write.
So now we will have eslint, formatting and stylelint running when we commit.
Running tests can be a rather lengthy job especially if you both are running unit and component tests (which is what I recommend). So we want to only run this before we push a branch so we still get fast feedback if a test is failing and can fix it with a git amend commit in case.
npx husky add .husky/pre-push 'npx nx affected -t test && npx nx affected -t component-test'
This will both run test and component-test for any affected project on pre-push.
Nx also provides commands to quickly generate new pages and components for your application.
nx g @nx/next:page my-next-page --project=my-next-app nx g @nx/next:component my-next-component --project=my-next-app
Above commands will add a new page my-next-page and a component my-next-component to my-next-app project respectively.
Nx generates components with tests by default. For pages, you can pass the --withTests option to generate tests under the specs folder.
If you want to add a new hook, run the following
nx g @nx/react:hook my-react-hook --project=my-react-app
Replace my-react-lib with the name of your project.
Run as Deve Mode:
nx dev my-next-app
nx serve my-react-app
Testing Projects
You can run unit tests with:
nx test my-next-app nx test my-next-lib
Replace my-next-app with the name or your project. This command works for both applications and libraries.
You can also run E2E tests for applications:
nx e2e my-next-app-e2e
Replace my-next-app-e2e with the name or your project with -e2e appended.
React applications can be build with:
nx build my-react-app
And if you generated a library with --bundler specified, then you can build a library as well:
nx build my-next-lib
The output is in the dist folder. You can customize the output folder by setting outputPath in the project's project.json file.
The application in dist is deployable, and you can try it out locally with:
npx http-server dist/apps/my-react-app
The library in dist is publishable to npm or a private registry.
React applications can be build with:
nx build my-next-app
To serve a Next.js application for production:
nx start my-next-app
لینک پروژه در گیت هاب:
nx repository
