NEXTjs.pptxfggfgfdgfgfdgfdgfdgfdgfdgfdgfg

fgfdgfdg

1. NEX T . JS Next.js is a flexible React framework that gives you building blocks to create fast web applications. 1

2. I NT R O DU C TION 2 S e r v e r - S i d e R e n d e r i n g ( S S R ) i s a t e c h n i q u e t h a t a ll o w s y o u r web a p pli c a ti on to pre -r e nder H T M L o n a s e r v e r , p r o v i d i n g f a s t e r l o a d t i m e s a n d a b e tt e r user exp er ien ce . In th i s t u t o r ial , w e ' l l c o v er N e x t . j s , a f r a m e w o r k f o r b u i l d i n g s e r v e r - r e n d e r e d R e a c t a pp li c a t i o n s .

3. W h y U s e SS R ? S S R c a n i m p r o v e S E O , p e r f o r m a n c e , and u s er exp erience . It al l ow s sear c h e n g i n e s t o b e t t e r c r a w l y o u r s it e , r e d u c e s t h e t i m e t o fi r s t p ai n t , a n d p r o v i d e s u s e r s w i t h a f u l l y r e n d e r e d p a g e on t he initi a l lo ad. Next.js s im pli fie s the pr oce s s of build i ng S S R a pp li c a t i o n s . 3

4. G E T T I N G S T A R T E D W I T H N E X T . J S 4 T o g e t s t ar t e d w i t h N e x t . j s , y o u ' ll n ee d t o i n s t a l l i t a n d c r e a t e a n e w p r o j e c t . N e x t . j s p r o v i d e s s e v e r al b u i l t - i n fe a t u r e s , s u c h a s d y n a m i c i m p o r t s , a u t o m a t i c c o d e s p li t t i n g , a n d s e r v e r - s i d e r e n d e r i n g . Y o u c a n a l s o e a s il y a d d c u s t o m r o u t e s a n d AP I en d poi n ts .

5. T o b u il d p a g e s w i t h N e x t . j s , y o u ' ll c r e a t e a p a g e s d i r e c t o r y a n d a d d R e a c t c o m p o n e n t s f o r e a c h p a g e . N e x t . j s u s e s g e t I n i t i a l P r o p s t o f e t c h d a t a a n d r e n d e r t h e p a g e o n t h e s e r v e r . Y o u c a n a l s o u s e d y n a m i c r o u t i n g a n d s t a t i c s it e g e n e r a t i o n t o o p t i m i z e p erforman c e . 5 B U I L D I N G P A G E S W I T H N E X T . J S

6. D e p l oy i n g Your Next.js App N e x t . j s m a k e s i t ea s y t o d e p l o y y o u r a p p t o V e r c e l , a c l o u d p l a t f o r m f o r s t a t i c a n d s e r v e r l e s s s i t e s . V e r c e l p r o v i d e s a u t o m a t i c SS L , c u s t o m d o m a i n s , a n d g l o b a l C D N . Y o u c a n a l s o d e p l o y t o o t h e r p la t f o r ms s u c h a s H e r o k u o r A W S . 6 D e p l o y i n g Y o u r N e x t . j s A pp

7. CONCLUSION Next.js provides a powerful framework for building server-rendered React applications. By using SSR, y o u c a n i mp r o v e S E O , p e r f o r m a n c e , a n d u s e r experience. With Next.js, you can easily create dynamic routes, API endpoints, and deploy your app to the cloud. Keep learning and building! 7

8. Building Blocks of a Web Application User Interface - how users will consume and interact with your application. Routing - how users navigate between different parts of your application. Data Fetching - where your data lives and how to get it. Rendering - when and where you render static or dynamic content. Integrations - what third-party services you use (CMS, auth, payments, etc) and how you connect to them. Infrastructure - where you deploy, store, and run your application code (Serverless, CDN, Edge, etc). Performance - how to optimize your application for end-users. Scalability - how your application adapts as your team, data, and traffic grow. Developer Experience - your team’s experience building and maintaining your 9 appli c a tion. B in u m o n Joseph , Assista n t Pro f essor

9. React ? Interactive User Interface Ja v aScr i pt l i brary for building interactive user interfaces. U s e r int e rf a ces, - u s er s see and in t e ract with El e men t s th a t on- screen. Library - React provides helpful functions to build UI, but leaves it up to the developer where to use those functions in their application. 10

10. Nex t .js? React f ramew o rk that g i ves y ou bu i ld i ng blocks to create web applications. Framework - Next.js handles the tooling and configuration needed for React, and provides additional structure, features, and optimizations for your application. 11

11. From JavaScript to React 12

12. Rendering User Interfaces

13. DOM vs UI

14. UI update with JavaScript Create new file index.html // Select the div element with 'app' id // Create a new H1 element // Create a new text node for the H1 element // Append the text to the H1 element // Place the H1 element inside the div <html> <body> <div id="app"></div> <script type="text/javascript"> const app = document.getElementById('app'); const header = document.createElement('h1'); const headerContent = document.createTextNode( 'Develop. Preview. Ship.', ); heade r . a p p e nd C hil d ( h ea d e r C on t e n t ); app.appendChild(header); </script> </body> </html> 15

15. Imperative vs Declarative Programming Imperative programming is like giving a chef step-by-step instructions on how to make a pizza. Declarative programming is like ordering a pizza without being concerned about the steps it takes to make the pizza. React is a Declarative Library

16. Imperative vs Declarative Programming Imperative programming is like giving a chef step-by-step instructions on how to make a pizza. Declarative programming is like ordering a pizza without being concerned about the steps it takes to make the pizza. React is a Declarative Library

17. Getting Started with React To use React in your project, you can load two React scripts from an external website called unpkg.com : react is the core React library. reac t - do m provid e s DOM- specific methods that enable you to use React with the DOM. <!-- index.html --> < html > < body > < div id =" app "></ div > < script s r c = " h t t p s:// u n pkg. c om/ r eact@1 7 /um d / r eact.d e v elopment.js "></ script > < script src =" https://unpkg.com/react- dom@17/umd/react- dom.development.js "></ script > < script type =" text/javascript "> const app = document . getElementById ( 'app' ); </ script > </ body > </ html > 18

18. Rendering React Instead of directly manipulating the DOM with plain JavaScript, you can use ReactDO M . render () the meth o d from reac t - do m to tell R e act to < h1 > render ou r title i n side our #app element. <!-- index.html --> < html > < body > < div id =" app "></ div > < script s r c = " h t t p s:// u n pkg. c om/ r eact@1 7 /um d / r eact.d e v elopment.js "></ script > < script src =" https://unpkg.com/react- dom@17/umd/react- dom.development.js "></ script > < script type =" text/javascript "> const app = document . getElementById ( 'app' ); ReactDOM . render ( < h1 > Develop . Preview . Ship . </ h1 > , app ); </ script > </ body > </ html > 18

19. JSX- JavaScript Syntax Extension JSX is a syntax extension for JavaScript that allows you to describe your UI in a H T M L -l i ke fami l i a r s y nt a x . The nice thing about JSX is that apart from following three JSX rules, you don’t need to learn any new symbols or syntax outside of HTML and JavaScript. Note that browsers don’t understand JSX out of the box, so you’ll need a JavaScript compiler, such as a Babel , to transform your JSX code into regular JavaScript. < html > < body > < div id =" app "></ div > < script src =" https://unpkg.com/react@17/umd/react.developm ent.js "></ script > < script src =" https://unpkg.com/react- dom@17/umd/react-dom.development.js "></ script > <!-- Babel Script --> < script src =" https://unpkg.com/@babel/standalone/babel.min.j s "></ script > < script type =" text/jsx "> const app = document . getElementById ( 'app' ); ReactDOM . render ( < h1 > Develop . Preview . Ship . </ h1 > , app ); </ script > </ body > </ html > 19

20. Component Trees

21. From React to Next.js 31

22. Starting with Next.js N o d e . j s 22 package.json {} npm install react react-dom next Install create a new file called with an empty object In your terminal, run • R e move react and react-dom scripts since you’ve installed them with NPM. <html> and <body> tags because Next.js will create these for you. ReactDom.render() Babel script The The The code that interacts with app element and method. The because Next.js has a compiler that transforms JSX into valid JavaScript browsers can understand. <script type="text/jsx"> The tag. The React . part of the React.useState(0) function

23. // index.html import { useState } from 'react’ ; function Header ({ title }) { return < h1 >{ title ? title : 'Default title' }</ h1 >; } function HomePage () { const names = [ 'Ada Lovelace' , 'Grace Hopper' , 'Margaret Hamilton’ ]; const [ likes , setLikes ] = useState ( ); function handleClick () { setLikes ( likes + 1 ); } return ( < div > < Header title =" Develop. Preview. Ship. " /> < ul > { names . map (( name ) => ( < li key ={ name }>{ name }</ li > ))} </ ul > < button onClick ={ handleClick }> Like ( { likes } ) </ button > </ div > ); }

24. Changing Environment pages 1. Move the index.js file to a new folder called (more on this later). default export 2. Add to your main React component to help Next.js distinguish which component to render as the main component of this page. export default function HomePage () { package.json Add a script to your file to run the Next.js development server while you develop. // package.json { "scripts" : { "dev" : "next dev" }, // "dependencies": { // "next": "^11.1.0", // "react": "^17.0.2", // "react- dom": "^17.0.2" // } }

25. Running the development server import { useState } from 'react’ ; function Header ({ title }) { return < h1 >{ title ? title : 'Default title' }</ h1 >; } export default function HomePage () { const names = [ 'Ada Lovelace' , 'Grace Hopper' , 'Margaret Hamilton’ ]; const [ likes , setLikes ] = useState ( ); function handleClick () { setLikes ( likes + 1 ); } return ( < div > < Header title =" Develop. Preview. Ship. " /> < ul > { names . map (( name ) => ( < li key ={ name }>{ name }</ li > ))} </ ul > < button onClick ={ handleClick }> Like ( { likes } ) </ button > </ div > ); } npm run dev

26. Create a Next.js App