Guide: How to Create a New Next.js Project
Part 1. Create a New Next.js Project
Open a Terminal
Open a terminal on your computer. On Windows, you can open a terminal by pressing the Windows key and typing "cmd" and pressing Enter.
Navigate to the Desired Directory
Change to the desired directory (folder) where you would like your project to be located. For example, if you want to create a project in a folder called cprg306-projects, you would type the following commands:
C:
cd \
mkdir cprg306
cd cprg306Do not use a cloud drive (e.g., Google Drive, OneDrive, Dropbox) for your
project. This can cause problems with the node_modules folder because it
contains thousands of files and will cause the cloud drive to sync constantly.
Create the New Next.js Project
Enter the following command in the terminal to create a new Next.js project:
npx create-next-app@latestIf you receive an error like the following: npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\[profile-name]\AppData\Roaming\npm', you
may need to create a folder called npm in your Windows AppData\Roaming
folder. You can do this by typing the following command in the terminal:
mkdir %AppData%\npm
The create-next-app application will scaffold (create/generate) a new Next.js project. For the assignments, here is how you must answer the questions:
| Question | Answer |
|---|---|
| What is your project named? | cprg306-assignments |
| Would you like to use TypeScript? | No |
| Would you like to use ESLint? | Yes |
| Would you like to use Tailwind CSS? | Yes |
Would you like to use src/ directory? | No |
| Would you like to use App Router? (recommended) | Yes |
| Would you like to customize the default import alias? | No |
Use the arrow keys to select the desired answer, then press Enter.
Note: It is also possible to use the following non-interactive command to create a new Next.js project:
npx create-next-app@latest cprg306-assignments --js --eslint --tailwind --no-src-dir --app --import-alias "@/*"
Close the Terminal
You can close the terminal now. From now on, you will only use the terminal in VS Code.
Part 2: Running Your Next.js Application
Open the New Project in VS Code
Open the project in VS Code using File -> Open Folder... and select the [app-name] folder that you have just created.
Open the terminal in VS Code
You can open the terminal in VS Code by going to View -> Terminal or by pressing Ctrl-` (backtick - the key is usually located at the top left of the keyboard).
Install Dependencies
In the terminal, run the following command to install the dependencies for the project:
npm installStart the Development Server
Run the following command to start the Next.js development server:
npm run devOpen the Application in Your Web Browser
After running npm run dev, a link to your local application (typically http://localhost:3000) will appear in the terminal. You can Ctrl-click this link to open it directly in your default web browser. If this doesn't work, you can manually open your preferred web browser and enter http://localhost:3000 in the address bar. You should see your new Next.js application running!
Stopping Development
When you are finished coding for the day and wish to shut down VS Code, you should shutdown the development server. In the terminal, press Ctrl-c to shut it down.
Part 3: Push Your Project to GitHub Using GitHub Desktop
Open GitHub Desktop
Add Local Repository
Click on File -> Add local repository... and choose the folder for [app-name].
Publish repository
Click the button "Push repository". It is recommended to keep the GitHub repository the same name as the app name.
Uncheck "Keep this code private" to allow the instructor access to your repository. Private repositories will be given a grade of 0.
Click the button "Publish repository".
View the Repository Code
In a browser, navigate to https://github.com/[GitHub-username]/[app-name] to see the code in your browser.