Skip to main content

Set up Next.js

To set up our Next.js app, we will use create-next-app. Ensure you are in the correct directory in your terminal before you create your project. To create a project in our existing project, run:

npx create-next-app@latest .

The period (".") ensures we make a Next.js app in our current directory instead of making a new folder.

info

npx is a command-line tool that comes with Node.js. It allows you to easily run commands from npm packages without needing to globally install them.

You'll see a number of prompts. Make sure to select the following answers. We will add TypeScript and ESLint later!

What is your project named? taskflow-<name>
Would you like to use TypeScript? No
Would you like to use ESLint? No
Would you like to use Tailwind CSS? No
Would you like your code inside a `src/` directory? Yes
Would you like to use App Router? (recommended) Yes
Would you like to use Turbopack for `next dev`?  No
Would you like to customize the import alias (`@/*` by default)? No

create-next-app will now create a folder with your project name, create all necessary directories and files, and install the required dependencies. If you already had created a folder with your project name, you want to ensure all your new files are in the root of your project and delete the newly created (now empty) directory.

Directories & files​

Let's take a look at the directories and files that were just created.

package.json​

This file contains important information about the project, such as its name, version, and other metadata. You'll also find some scripts here. These scripts will run certain functions within Next.js that will help us develop our application.

  • dev starts up a (Node) server which builds the existing pages (which we don't have yet!), compiles our app and runs it for us while developing
  • build creates a bundled version of our app which can be used in hosting and is for production ends
  • start runs the built version of the app
  • lint will check the codebase on code quality issues. This command will work after we've configured ESLint.

You can run the scripts by using npm in any terminal when in the root directory of your app:

npm run dev

package.json also contains all dependencies and their corresponding versions. In order to make sure that all developers are using the exact same version, this information is stored in a lockfile, which is package-lock.json.

node_modules​

This directory holds all the dependencies that are installed: the dependencies mentioned in package.json and all their dependencies.

public​

The public folder is an optional folder to store static assets such as images, fonts, etc. Files inside public directory can then be referenced by your code starting from the base URL (/).

src​

The main purpose of the src folder is to hold all the files that contain the actual code and logic of the application. This separation allows developers, collaborators, and build tools to easily distinguish between the source code and other project assets, such as configuration files, documentation, tests, or build output.

app​

Inside the src folder, you see the app directory. Next.js uses a file-system based router where folders are used to define routes. We'll dive deeper into this topic in the next section so everything is explained together.

Other individual files​

Besides the directories, there are also different files present.

.gitignore is used to specify which files and directories should not be tracked by Git. Only the source code should be committed to the repository. The installed dependencies in node-modules/, build-related files and sensitive data should not be included in Git. Sensitive information is often stored in .env files, which should also be listed in .gitignore to prevent accidental exposure.

jsconfig.json is a configuration file used in JavaScript projects, particularly in projects using ECMAScript modules (ES modules) or TypeScript. It allows developers to specify various settings and options for their JavaScript or TypeScript codebase, enabling better tooling support and enhanced development experiences.

next.config.js is a special configuration file used in Next.js projects. It allows developers to customize the build and runtime behavior of their Next.js applications. By creating this file in the root directory of the project, you can modify various aspects of your Next.js app, such as webpack configurations, environment variables, redirects, headers, and more.

README.md (where "md" stands for Markdown) serves as a crucial documentation file and provides essential information about the project. The primary purpose of a README.md file is to help developers, collaborators, and users understand the project's purpose, functionality, installation instructions, and other important details.

Further reading​