This post shows multiple ways to create a NextJS application.

In order to create a NextJS application or project, The following are prerequisite

  • Nodejs installation
  • npm and node command works in terminal

There are multiple ways to create a nextjs project.

  • using create-next-app CLI
  • using template

Create a NextJS application from a scratch using create-next-app

This approach uses create-next-app CLI. CLI helps to quickly create a NextJS application with a default template for scaffolding of entire folder structure, install dependencies for you.

First, Open the terminal in MacOS or Unix flavors, or Command-line in windows.

next, Type npx create-next-app --typescript command in command line,

This command asks for the project name Here is an output

A:\work\nextjs>npx create-next-app --typescript
√ What is your project named? ... nextjsapp
Creating a new Next.js app in A:\work\nextjs\nextjsapp.

Using npm.

Installing dependencies:
- react
- react-dom
- next


added 16 packages, and audited 17 packages in 14s

2 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Installing devDependencies:
- eslint
- eslint-config-next
- typescript
- @types/react
- @types/node


added 208 packages, and audited 225 packages in 54s

63 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Initialized a git repository.

Success! Created nextjsapp at A:\work\nextjs\nextjsapp
Inside that directory, you can run several commands:

  npm run dev
    Starts the development server.

  npm run build
    Builds the app for production.

  npm start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd nextjsapp
  npm run dev

It creates a folder with all setup configurations and installed dependencies.

Now, change to the created directory

cd nextjsapp

Here is a NextJS application Folder Structure

NextJS application Folder Structure

Following is NextJS Nested Directory file structure

|   .eslintrc.json
|   .gitignore
|   next-env.d.ts
|   next.config.js
|   package-lock.json
|   package.json
|   README.md
|   tsconfig.json
|
+---.next
|   |   build-manifest.json
|   |   package.json
|   |   react-loadable-manifest.json
|   |   trace
|   |
|   +---cache
|   |   \---webpack
|   |       +---client-development
|   |       |       0.pack
|   |       |       1.pack
|   |       |       index.pack
|   |       |       index.pack.old
|   |       |
|   |       \---server-development
|   |               0.pack
|   |               1.pack
|   |               index.pack
|   |               index.pack.old
|   |
|   +---server
|   |   |   middleware-manifest.json
|   |   |   pages-manifest.json
|   |   |   webpack-runtime.js
|   |   |
|   |   \---pages
|   |           index.js
|   |           _app.js
|   |           _document.js
|   |           _error.js
|   |
|   \---static
|       +---chunks
|       |   |   amp.js
|       |   |   main.js
|       |   |   polyfills.js
|       |   |   react-refresh.js
|       |   |   webpack.js
|       |   |
|       |   \---pages
|       |           index.js
|       |           _app.js
|       |           _error.js
|       |
|       +---development
|       |       _buildManifest.js
|       |       _middlewareManifest.js
|       |       _ssgManifest.js
|       |
|       \---webpack
|               6efd03f005c0e2e3.webpack.hot-update.json
|               webpack.6efd03f005c0e2e3.hot-update.js
|
+---pages
|   |   about.tsx
|   |   index.tsx
|   |   _app.tsx
|   |
|   +---api
|   |       hello.ts
|   |
|   \---employee
|           create.tsx
|           delete.tsx
|           edit.tsx
|           list.tsx
|           view.tsx
|+---node_modules
|       favicon.ico
|       vercel.svg
|
+---public
|       favicon.ico
|       vercel.svg
|
\---styles
        globals.css
        Home.module.css
        

node_modules: Dependencies required for the project public:

It contains static files, CLI generates favicon.ico and vercel.svg files. We can also include assets such as images, pngs, any site verification files such as Google and Microsoft.

Pages: This folder contains the pages required for the application. It contains api folder, index.tsx and _app.tsx files. Each page file created in this folder is a React Component and assigned with a unique root to your application. For example, If you created an about.tsx page file, It is accessible at the localhost:3000/about path.

the files which contain underscore(_) are _app.js custom components. These are special components called by other pages. styles: styles are CSS or sass code files placed here.

Run the npm run dev command to start web server

A:\work\nextjs\nextjsapp>npm run dev

> nextjsapp@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 5.3s (124 modules)
wait  - compiling / (client and server)...
event - compiled client and server successfully in 409 ms (140 modules)

Accessing http://localhost:3000 on browsers shows

NextJS Hello World example