Next.js

1. Click New Solution on the Welcome screen or select File | New Solution from the main menu. The New Solution dialog opens.

2. In the left-hand pane, choose Next.js.

3. In the right-hand pane:

   1. Specify the path to the folder where the project-related files will be stored.

   2. In the Node runtime field, specify the Node.js runtime to use. Select a configured runtime from the list or choose Add to configure a new one.

   3. From the create-next-app list, select npx create-next-app.

      Alternatively, for npm version 5.1 and earlier, install the create-next-app package yourself by running npm install --save-dev next react react-dom in the Terminal Ctrl0`. When creating an application, select the folder where the create-next-app package is stored.

   4. Optionally:

      To use TypeScript instead of JavaScript, select the Use TypeScript template checkbox. JetBrains Rider will generate .ts files for your application and a tsconfig.json configuration file.

4. When you click Create, JetBrains Rider generates a Next.js-specific project with all the required configuration files and downloads the required dependencies. JetBrains Rider also creates an npm start and JavaScript Debug configurations with default settings for running or debugging your application.

tip

Alternatively, open the built-in Terminal and type:

1. npx create-next-app <application-name> to create an application.

2. cd <application-name> to switch to the application folder.

3. npm start to start the Node.js server.

1. Click New Solution on the Welcome screen or select File | New Solution from the main menu. The New Solution dialog opens.

2. In the left-hand pane, choose Empty Project. In the right-hand pane, specify the application folder and click Create.

1. Open the empty project where you will use Next.js.

2. In the embedded Terminal (Ctrl0`) , type:

   npm install --save-dev next react react-dom

1. Сlick in the gutter next to the dev script in package.json, or execute the next dev command in the Terminal Ctrl0`, or double-click the dev task in the npm tool window (View | Tool Windows | npm).

   

2. Wait till the application is compiled and the development server is ready.

   The Run tool window or the Terminal shows the URL at which your application is running, the default URL is http://localhost:3000.

   

   Click this link to view the application in the browser.

1. Set breakpoints where necessary.

2. Сlick in the gutter next to the dev script in package.json, or execute the next dev command in the Terminal Ctrl0`, or double-click the dev task in the npm tool window (View | Tool Windows | npm).

3. Wait till the application is compiled and the development server is ready.

   The Run tool window or the Terminal shows the URL at which your application is running, the default URL is http://localhost:3000.

   

   Hold CtrlShift and click the link.

4. When the application opens in the browser, perform the actions that trigger the program execution, for example, click a link. The focus switches to JetBrains Rider with the Debug window open.

   

   Proceed as usual: step through the program, stop and resume program execution, examine it when suspended, explore the call stack and variables, set watches, evaluate variables, view actual HTML DOM, and so on.

1. Go to Run | Edit Configurations. Alternatively, select Edit Configurations from the Run widget on the toolbar.

   

   In the Edit Configurations dialog that opens, click the Add button () on the toolbar and select npm from the list.

2. In the Configuration tab of the Run/Debug Configurations: npm dialog that opens, specify the location of the package.json, the Node.js runtime, and the package manager to use.

   In the Command field, select run from the list and then select the script to run from the Scripts list. Most likely it will be the default dev script but you can configure another one in your package.json, for example, to run the application on a custom port.

   

3. Optionally:

   To open the application in the browser, update the configuration as follows: in the Browser / Live Edit tab, select the After launch checkbox, select the browser to open the application in, and specify the URL address at which the application wil run.

   

   note

   If you are going to debug the application, select Google Chrome or another Chromium-based browser.

1. From the list in the Run widget on the toolbar, select a run configuration of the type npm. This can be the autogenerated Next.js: server-side configuration or a custom one that you created yourself as described above.

   

   Click .

2. When the application is compiled and the development server is ready, the Run tool window shows the URL at which your application is running. The default URL is http://localhost:3000, however if the default port 3000 is already busy, the server tries starting on the closest free port.

   

   Click this link to view the application.

   Alternatively, enable JetBrains Rider to open the application on start as described above.

note

When the development server is running, your application is automatically reloaded as soon as you change any of the source files and save the updates.

1. Set breakpoints where necessary.

2. Run your application in the development mode with an npm run/debug configuration or with next dev.

3. When the application is compiled and the development server is ready, the Run tool window shows the URL at which your application is running. The default URL is http://localhost:3000, however if the default port 3000 is already busy, the server tries starting on the closest free port.

   note

   Make sure to specify the actual port in the JavaScript Debug configuration.

4. From the list in the Run widget on the toolbar, select a run configuration of the type JavaScript Debug. This can be the autogenerated Next.js: debug client configuration or a custom one that you created yourself as described above.

   

   Click .

5. When the application opens in the browser, perform the actions that trigger the program execution, for example, click a link. The focus switches to JetBrains Rider with the Debug window open.

   Proceed as usual: step through the program, stop and resume program execution, examine it when suspended, explore the call stack and variables, set watches, evaluate variables, view actual HTML DOM, and so on.