This post shows multiple ways to create a NextJS application.
To create a NextJS application or project, The following are prerequisite
- Nodejs installation
- npm and node command work 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
CLI helps to quickly create a NextJS application with a default template for scaffolding of entire folder structure and installing dependencies for you.
First, Open the terminal in macOS or Unix flavors, or Command-line in windows.
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
Here is a 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
It contains static files, and CLI generates
vercel.svg files. We can also include assets such as images, pngs, and any site verification files such as Google and Microsoft.
Pages: This folder contains the pages required for the application.
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
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.
npm run dev command to start the web server
A:\work\nextjs\nextjsapp>npm run dev > [email protected] 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