![// 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(0);
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>
);
}](https://image.slidesharecdn.com/nextjs-240825145017-7b11f003/85/NEXTjs-pptxfggfgfdgfgfdgfdgfdgfdgfdgfdgfg-23-320.jpg)
![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(0);
function handleClick() {
setLikes(likes + 1);
}
return ( <div> <Header
title="Develop.
Preview. Ship. " />
<ul>
{names.map((name) =>
(
<li
key={name}>{name}</li
>
))}
npm run dev](https://image.slidesharecdn.com/nextjs-240825145017-7b11f003/85/NEXTjs-pptxfggfgfdgfgfdgfdgfdgfdgfdgfdgfg-25-320.jpg)
NEXTjs.pptxfggfgfdgfgfdgfdgfdgfdgfdgfdgfg
- 1. NEXT.J S • Next.js is a flexible React framework that gives you building blocks to create fast web applications. 1
- 2. INTRODUCTION 2 Server-Side Rendering (SSR) is a technique that allows your web application to pre-render HTML on a server, providing faster load times and a better user experience. In this tutorial, we'll cover Next.js, a framework for building server-rendered React applications.
- 3. WhyUse SSR? SSR can improve SEO, performance, and user experience. It allows search engines to better crawl your site, reduces the time to first paint, and provides users with a fully rendered page on the initial load. Next.js simplifies the process of building SSR applications. 3
- 4. GETTING STARTED WITH NEXT.JS 4 To get started with Next.js, you'll need to install it and create a new project. Next.js provides several built-in features, such as dynamic imports, automatic code splitting, and server-side rendering. You can also easily add custom routes and API endpoints.
- 5. To build pages with Next.js, you'll create a pages directory and add React components for each page. Next.js uses getInitialProps to fetch data and render the page on the server. You can also use dynamic routing and static site generation to optimize performance. 5 BUILDING PAGESWITH NEXT.JS
- 6. Deployin g Your Next.js App Next.js makes it easy to deploy your app to Vercel, a cloud platform for static and serverless sites. Vercel provides automatic SSL, custom domains, and global CDN. You can also deploy to other platforms such as Heroku or AWS. 6 Deploying Your Next.js App
- 7. CONCLUSION Next.js provides a powerful framework for building server-rendered React applications. By using SSR, you can improve SEO, performance, and user 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
- 9. React ? Interactive User Interface • JavaScript library for building interactive user interfaces. • User interfaces, - users see and interact wit h Elements that 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. Next.js? • React frameworkthat gives you building 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. 1
- 11. From JavaScript to React 12
- 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.', ); header.appendChild(headerContent); 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. • react-dom provides DOM- specific methods that enable you to use React with the DOM. <!-- index.html --> <html> <body> <div id="app"></div> <script src="https://unpkg.com/react@17/umd/r eact.dev 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 ReactDOM.render( ) th e metho d from react-domto tell React to <h1 > render our title inside our #ap p element . <!-- index.html --> <html> <body> <div id="app"></div> <script src="https://unpkg.com/react@17/umd/r eact.dev 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 HTML- like familiar syntax. • 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
- 22. Starting with Next.js Node.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 • Remov e 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(0); 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 page s 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.jso n 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(0); function handleClick() { setLikes(likes + 1); } return ( <div> <Header title="Develop. Preview. Ship. " /> <ul> {names.map((name) => ( <li key={name}>{name}</li > ))} npm run dev
- 26. Create a Next.js App