Creating a Next.js Web Application

Next.js is a kind of fullstack JavaScript framework which is JavaScript framework build on top of ReactJs. Nextjs is developed by Vercel. Nextjs overcomes the features which are not available in reactjs, features like Server Side Rendering, Static Site Generation, API routes, code splitting, SEO optimization, fetch cache, inbuild gzip.

ReactJs is used to create Single Page Applications called as SPA which is good for application development. Its best for web app which not requires SEO.

Next.Js is build on top of ReactJs so we can use all the reactjs feature on top nextjs can do web page static render at server side (SSR), created static file at build time , use incremental static generation (ISR).

Create nextjs project

Recommend way for creating next project is to use create-next-app, run this command to create project

1npx create-next-app@latest
1C:\Users\User\Desktop\test-projects>npx create-next-app@latest 2√ What is your project named? ... testproject 3√ Would you like to use TypeScript? ... No / Yes 4√ Would you like to use ESLint? ... No / Yes 5√ Would you like to use Tailwind CSS? ... No / Yes 6√ Would you like to use `src/` directory? ... No / Yes 7√ Would you like to use App Router? (recommended) ... No / Yes 8√ Would you like to customize the default import alias? ... No / Yes 9Creating a new Next.js app in C:\Users\User\Desktop\test-projects\testproject. 10 11Using npm. 12 13Initializing project with template: app 14 15 16Installing dependencies: 17- react 18- react-dom 19- next 20- typescript 21- @types/react 22- @types/node 23- @types/react-dom 24- eslint 25- eslint-config-next 26 27added 277 packages, and audited 278 packages in 59srt: timing idealTree:node_modules/eslint-plugin-import Completed in 28106 packages are looking for funding 29 run `npm fund` for details 30 31found 0 vulnerabilities 32Initialized a git repository. 33 34Success! Created testproject at C:\Users\User\Desktop\test-projects\testproject

Next.js also support TypeScript, Tailwind CSS Project is created under testproject folder, Nextjs project structure

Run next.js development server

run npm run dev to start the development server which open default layout template

src\app\page.tsx Nextjs project default page

Edit the src\app\page.tsx file which will output "Hello Next.js" under h1 tag

1export default function Home() { 2return ( 3 <div> 4 <h1>Hello Next.js</h1> 5 </div> 6 ) 7}

Manual Installation Next.js

Run this command to install necessary package to create next.js project

1npm install next@latest react@latest react-dom@latest

Add below config commands to package.json

1{ 2 "scripts": { 3 "dev": "next dev", 4 "build": "next build", 5 "start": "next start", 6 } 7}

npm run dev command is used to run a development server npm run build command is used to create a production build, output will be save in .next folder npm run start command is used to run production build