This document provides an introduction to Next.js, a web development framework created by Vercel that enhances React by offering pre-rendering capabilities for improved performance and SEO. It covers the benefits of using Next.js, such as its widespread adoption by major brands, ease of deployment via Vercel, and features like static and server-side rendering. The presentation also includes a quick demo on creating a Next.js app and highlights key takeaways for developers.

1. Getting started with Next.js

2. WHO AM I?
Getting started with Next.js
2 @ileshmistry | @IM_TechMeetup
IM Tech Meetup
ILESH MISTRY
(CMS SPECIALIST &
KONTENT.AI MVP)
SUBSCRIBE TO MY YOUTUBE
CHANNEL
FOUNDER & ORGANISER
OF
CONTACT ILESH
@ileshmistry |
@IM_TechMeetup

3. WHAT I’LL BE COVERING?
3
• What is Next.js?
• Why use it?
• How to get started
• Quick demo with configuration
• Takeaways
@ileshmistry | @IM_TechMeetup
IM Tech Meetup
Getting started with Next.js

4. WHAT IS NEXT.JS?
4 @ileshmistry | @IM_TechMeetup
IM Tech Meetup
Getting started with Next.js

5. 5
• Web development framework created by Vercel
• Open-source
• Is a React framework that gives you building blocks to create websites and applications
• As it’s highly connected to Vercel there is a smooth deployment platform with it
• Acts as a wrapper around the benefits of React and bridges the gap for the browser. As typically
React is client side, Next.js helps to pre-render content.
@ileshmistry | @IM_TechMeetup
IM Tech Meetup
Getting started with Next.js
WHAT IS NEXT.JS?

6. WHAT IS NEXT.JS?
6
• Pre-render. Instead of doing everything client side. Next.js generates HTML in advance. Two
forms of pre-rendering
@ileshmistry | @IM_TechMeetup
IM Tech Meetup
Getting started with Next.js
Static Generation (build time)
• Build once and serve via CDN
• Faster than server rendering page
via request
Server-side Rendering (request time)
• Used more for frequent changes
to data/content on page
• Can prove slower
Image source - https://nextjs.org/learn/basics/data-fetching/two-forms

7. WHY USE IT?
7 @ileshmistry | @IM_TechMeetup
IM Tech Meetup
Getting started with Next.js

8. WHY USE IT?
8
• One of the most recognised and widely used development frameworks by the community
• Big brands like TikTok, Nike, Notion, Nintendo etc… are using it
• Seems like the ‘go to’ item in the tech stack, especially for front-end developers
• Evolving pretty fast in the market and becoming a strong leader
• Next/image - Image optimisation and others
• It’s better for SEO as your HTML is pre-loaded compared to standard reach app
@ileshmistry | @IM_TechMeetup
IM Tech Meetup
Getting started with Next.js

9. WHY USE IT?
9
• Because of its connectivity with Vercel, you have the deployment relationship
- Develop, Preview, and Ship.
• Any pages using static generation and assets will automatically be served from the super fast
Vercel Edge Network.
• Any pages using server-side rendering and API routes will automatically become isolated
serverless functions, allowing to scale infinitely the page rendering and API requests.
• Sneak peak 👀… (will show this in the demo)
• Preview Pull Request changes is really cool feature so you can see what the changes would look
like on the URL you are looking to deploy to before the code is actually merged and deployed.
• This preview URL can be shared to others e.g. get sign off
@ileshmistry | @IM_TechMeetup
IM Tech Meetup
Getting started with Next.js

10. NEW NEXT.JS APP
10
• Create next app will start you off e.g. npx create-next-app nextjs-im-tech-meetup
• You will have the following in a basic set up
• Go through the code files in VS Code
• Routing generally through the folder structure under /pages
• Start using Next.js 😍
@ileshmistry | @IM_TechMeetup
IM Tech Meetup
Getting started with Next.js

11. DEPLOYMENT DEMO
11
• Create a sample next app
• My favourite stack, which is React, Next.js, Tailwind, TypeScript and Kontent.ai as the
headless CMS deployed to Vercel
• Pray to the demo gods 🙏🏾 🤣
@ileshmistry | @IM_TechMeetup
IM Tech Meetup
Getting started with Next.js

12. TAKEAWAYS
12
• Awesome documentation
• Getting tutorial/learning materials
• Easy to install and get going
• Subscribe to their newsletter
• Develop.Preview.Ship totally rocks 🤣🏽
• Preview and share Pull Request changes is a game changer 😍
@ileshmistry | @IM_TechMeetup
IM Tech Meetup
Getting started with Next.js

13. TAKEAWAYS
13
• No need to look for other hosting platforms
• Easy for someone with little or no systems knowledge to deploy websites and applications
@ileshmistry | @IM_TechMeetup
IM Tech Meetup
Getting started with Next.js

14. TAKEAWAYS
14 @ileshmistry | @IM_TechMeetup
IM Tech Meetup
Getting started with Next.js

15. ANY QUESTIONS…
15 @ileshmistry | @IM_TechMeetup
IM Tech Meetup
SUBSCRIBE –
IM Tech Meetup
Getting started with Next.js
FOUNDER & ORGANISER
OF
@ileshmistry |
@IM_TechMeetup