# Part 4: How to Build a NextJS App using Typescript and TailwindCSS: The Complete Guide **Hello Everyone** 👋 I'm Abhinav Rajesh and I'm back with the 4th Part of the series "How to Build a NextJS App using Typescript and TailwindCSS: The Complete Guide" where we would be learning about ESLint and Head & Script Tag of NextJS, and Deploying the NextJS Applcation to Vercel. I'm really sorry for the gap between the articles, got busy with hackathons(Adding link to articles on my [hackathon projects](https://blog.abhinavrajesh.xyz/series/hackathon) In case you wanna check it out) and stuff in life. ### Previous Parts of Series 1. [Part 1: Setting up NextJS with Typescript and TailwindCSS](https://blog.abhinavrajesh.xyz/setting-up-nextjs-with-typescript-and-tailwindcss) 2. [Part 2: Fetching and displaying data from API in NextJS using getStaticProps, TailwindCSS @apply directive and Typescript Interface.](https://blog.abhinavrajesh.xyz/fetching-from-api-in-nextjs-using-getstaticprops-typescript) 3. [Part 3: Dynamic routing and API endpoints in NextJS](https://blog.abhinavrajesh.xyz/dynamic-routing-and-api-endpoints-in-nextjs) In the last article, we discussed about Dynamic routing and API endpoints in NextJS. In case you missed the [article](https://blog.abhinavrajesh.xyz/dynamic-routing-and-api-endpoints-in-nextjs) I would recommend checking them out first. In this article we would be going through the following - Adding meta tags with the help of `Head` provided by NextJS to optimize SEO of the pages. - `Script` by NextJS - ESLint - Deploying NextJS Application ### Head `Head` is a built-in component for appending elements to the `head` of the page. We can add stylesheets, JS Scripts, meta tags, custom title, etc. `Head` is really useful for SEO optimization and to rank the website higher in google indexing. In our example we would be adding multiple meta tags to improve the SEO of our project. If you got to the chrome devtools and run the lighthouse tests for SEO, you would see something similar as below
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1631085686788/stdmUqMru.png)
#### Now you may ask what's the use of title and description? Title is really important for a page to be indexed at the top of the result. [Learn More](https://web.dev/document-title/) >The title gives screen reader users an overview of the page, and search engine users rely on it heavily to determine if a page is relevant to their search. Description is as important as Title is. [Learn More](https://web.dev/meta-description) >Meta descriptions may be included in search results to concisely summarize page content As this tutorial is just to make you understand what `Head` tag by NextJS does, I'm not diving deep into the SEO part. Would release an article on ranking higher in Google search index in coming future! So, we would add title and description for out articles. To do that go to `/pages/article/[id].tsx` and change the `Article`function to the following snippet ```jsx const Article = ({ article, }: InferGetStaticPropsType) => { return (
{article.title}

{article.title}

{article.body}

Go Back
); }; ``` Here we have added `Head` tag inside the Article function and have added `title` and `meta description` tags. If you go to your browser and check the tab, you should see something similar
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1631086833842/oKw1TDSmu.png)
The title of the article acts as the title of the webpage! And if you inspect the page and check the `head` tag, you can see `meta description` tag too!
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1631086915859/coMroyZ1Nl.png)
So from this example, we could understand that, whatever you input inside the `Head` component of NextJS, it gets injected to `head` tag of the page! #### What if there are multiple `Head` tags? NextJS handles multiple `Head` tags by itself. Just to be sure there are no duplicates we can add `key` prop in the `meta` tag. By default meta tags with duplicate names would automatically be handled by NextJS. Similarly, we could add meta tags for our home and about page. This I would give as a practice for you to do, do try it out so you understand what it really does and let me know in the comments! >P.S. Also, create the about page for this application as a practice ### Script Previously to add script tags to your project, we would have to define `script` tag inside `Head` of NextJS in you page. But since NextJS v11, NextJS comes with a `Script` component. The `Script` component enables developers to set the loading priority of third-party scripts to save developer time and improve loading performance. There are 3 loading priorities for the scripts: - `beforeInteractive`: These are used critical scripts that need to be fetched and executed before the page is interactive, such as bot detection and consent management. These scripts are injected into the initial HTML from the server and run before self-bundled JavaScript is executed. - `afterInteractive`: This mode is set as default if you do not specify strategy. These are the scripts that can fetch and execute after the page is interactive, such as tag managers and analytics. These scripts are injected on the client-side and will run after hydration. - `lazyOnload`: These are for scripts that can wait to load during idle time, such as chat support and social media widgets. (Chat widgets such as [Chatbotish](https://chatbotish.vercel.app)) However, we won't be using `Script` component by NextJS for this application because we do not have any external scripts to load. But, here is a small example taken from the NextJS Documentation ```jsx import Script from 'next/script' export default function Home() { return ( <>