nextjs

Create a new Next.js project with App Router by running `npx create-next-app@latest` and selecting TypeScript and App Router during setup. This initializes a modern Next.js application (v15+) with file-based routing under the `app/` directory, Server Components by default, and automatic optimization of images, fonts, and scripts for performance.

App Router is Next.js's modern architecture using the `app/` directory with Server Components by default, nested layouts, and Suspense support for better data fetching and reduced client-side JavaScript. Pages Router uses the older `pages/` directory structure. App Router provides superior performance optimization and full-stack capabilities for building React applications.

Server-side rendering in Next.js happens automatically with Server Components in App Router. Fetch data directly in server components using async/await, or use Route Handlers for API endpoints. This reduces client-side JavaScript and improves performance by executing data fetching on the server before rendering.

Yes, you can migrate from Pages Router to App Router by gradually moving routes and components. Convert `pages/` files to `app/` directory structure, adopt Server Components by default, update data fetching patterns, and leverage nested layouts and API Route Handlers for your full-stack application.

Next.js automatically optimizes images, fonts, and scripts to improve load times and user experience. Image optimization includes responsive sizing and lazy loading; font optimization reduces layout shift; and code splitting minimizes client-side JavaScript. These built-in optimizations work with App Router and Server Components for SEO-friendly, performant applications.

No, Next.js App Router uses file-based routing—routes are automatically created from your `app/` directory structure. Nested layouts organize related pages, and special files like `page.tsx` and `layout.tsx` define routes and shared UI. No manual routing configuration is required.