NEXT.JS

when building an app using react, the following has to be taken into consideration

• Code has to be bundled using a bundler like webpack and transformed using a compiler like Babel.
• You need to do production optimizations such as code splitting.
• You might want to statically pre-render some pages for performance and SEO. You might also want to use server-side rendering or client-side rendering.
• You might have to write some server-side code to connect your React app to your data store.

• One solution to this problem is using a high level of abstraction framework, i.e NEXT.JS.

Next.js: The React Framework

Next.js aims to have best-in-class developer experience and many built-in features, such as:

An intuitive page-based routing system (with support for dynamic routes) Pre-rendering, both static generation (SSG) and server-side rendering (SSR) are supported on a per-page basis Automatic code splitting for faster page loads Client-side routing with optimized prefetching Built-in CSS and Sass support, and support for any CSS-in-JS library Development environment with Fast Refresh support API routes to build API endpoints with Serverless Functions Fully extendable

Commands

Create a Next.js app

npx create-next-app nextjs-blog –use-npm –example “https://github.com/vercel/next-learn-starter/tree/master/learn-starter”

Run the development server

cd nextjs-blog npm run dev

Editing the starter Page

Download Starter Code (Optional)

npx create-next-app nextjs-blog –use-npm –example “https://github.com/vercel/next-learn-starter/tree/master/navigate-between-pages-starter”

Image Component

import Image from ‘next/image’

const YourComponent = () => ( <Image src=”/images/profile.jpg” // Route of the image file height={144} // Desired size with correct aspect ratio width={144} // Desired size with correct aspect ratio alt=”Your Name” /> )

Writing and Importing CSS

• CSS and Sass (import .css and .scss files)
• Tailwind CSS

Restart the Development Server

npm run dev