--- title: Developing slug: oms/0Ofx-developing docTags: createdAt: 2022-11-08T14:19:35.000Z --- Here are some common scripts that you'll use to work with [Chord's Next.js starter kit](https://github.com/chordcommerce/nextjs-starter-performance). As with any Next.js site, you can customize the `scripts` in [`package.json`](https://github.com/chordcommerce/nextjs-starter-performance/blob/main/package.json#L5-L15) , but we'll describe the defaults here. ### Starting a development server :::CodeblockTabs yarn ```shell yarn dev ``` npm ```shell npm run dev ``` ::: Starts a Next.js server in development mode on [http://localhost:3000](http://localhost:3000). Hot reload is automatically enabled. ### Running unit tests :::CodeblockTabs yarn ```shell yarn test # runs all tests yarn test:watch # runs all tests in watch mode ``` npm ```shell npm test # runs all tests npm run test:watch # runs all tests in watch mode ``` ::: This starter uses [Jest](https://jestjs.io/), and [react-testing-library](https://github.com/testing-library/react-testing-library) to test React components. Running the tests in `watch` mode will re-run the tests any time a code change is detected. ### Building a production site :::CodeblockTabs yarn ```shell yarn build ``` npm ```shell npm run build ``` ::: Builds the site for production. ### Starting a production server :::CodeblockTabs yarn ```shell yarn start ``` npm ```shell npm start ``` ::: Starts a production Next.js server on [http://localhost:3000](http://localhost:3000). ### Optimizing a production site The starter kit comes with [`@next/bundle-analyzer`](https://www.npmjs.com/package/@next/bundle-analyzer) , which generates a visualization of the site's Javascript bundles. This can be helpful for understanding and optimizing bundle size. :::CodeblockTabs yarn ```shell yarn analyze ``` npm ```shell npm run analyze ``` ::: Runs `next build` and also opens a browser window with an interactive visualization of bundles.