Introduction to Next.js and Setting up Next.js locally

#nextjs #tailwindcss #typescript #react

React Client-Side Rendering

React is mainly used for designing single-page applications(SPA), and it excels in creating interactive UIs. React primarily uses client-side rendering(CSR), which means the browser requests the react server for index.html, and react server responds with the following index.html. This HTML doesn't include any actual content of the page. Then, the browser checks for the <script> tag in the index.html and requests for the JavaScript/TypeScript files, which will be given by the React development server. After receiving the JS/TS files, the browser starts to execute them, which is where React takes over and renders the components into the specified <div> tag.

Problem with React CSR
With CSR, websites will face Search Engine Optimization(SEO) challenges. Since search engines generally rely on web crawlers, it's difficult for web crawlers to find the entire content of a particular page since only minimal HTML will be rendered initially and then the JavaScript will be rendered, which crawlers may not be able to process immediately, leading to bad SEO page rankings.
Also, sharing these website links to social media can lead to problems. With CSR, when social media crawlers try to generate a preview for the website link, no content will be found since initially minimal HTML will be loaded.

Server-Side Rendering in Next.js

Server-side rendering in Next.js means that the server generates HTML for each request and sends it to the browser(client).
As the user requests a page, the Next.js server will fetch data(from the Database or from APIs) before rendering, and fully rendered HTML will be sent to the client, and the client will display the HTML page without any extra fetching or rendering.

SEO with Next.js
Web Crawlers will get the fully rendered HTML for them to go through, which can lead to an easy understanding of the website, ultimately leading to better SEO page rankings.

Setting up Next.js locally

Open terminal and run create next-app@latest
Select Yes for TypeScript, ESLint, TailwindCSS, src directory, App Router
Once the dependencies are installed, you will see a success message as shown below
Run npm run dev
Open your favorite browser and enter localhost:3000
BINGO!!! You now have a Next.js project set up locally and ready for development!