Getting started with Next.js - IM Tech Meetup - Oct 2022.pptx
•Télécharger en tant que PPTX, PDF•
0 j'aime•105 vues
The October 2022 IM Tech Meetup was about Next.js. This presentation was about Getting started with Next.js. 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. 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
Contenu connexe
Tendances
Tendances (20)
Similaire à Getting started with Next.js - IM Tech Meetup - Oct 2022.pptx
Similaire à Getting started with Next.js - IM Tech Meetup - Oct 2022.pptx (20)
Plus de Ilesh Mistry
Plus de Ilesh Mistry (12)
Dernier
Dernier (20)
Getting started with Next.js - IM Tech Meetup - Oct 2022.pptx
- 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