NEXTjs.pptxfggfgfdgfgfdgfdgfdgfdgfdgfdgfg

NEXT.J
S
• Next.js is a flexible React framework that
gives you building blocks to create fast web
applications.
1

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.

WhyUse
SSR?
SSR can improve SEO,
performance, and user
experience. It allows search
engines to better crawl your site,
reduces the time to ﬁrst paint, and
provides users with a fully rendered
page on the initial load. Next.js
simpliﬁes the process of building
SSR applications.
3

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.

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

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

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

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

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

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

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

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

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.

<html>
<body>
<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>
const app =
document.getElementById('app');
</script>
</body>
</html>
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
.

<html>
<body>
<script src="https://unpkg.com/react@17/umd/r
eact.dev elopment.js"></script>
dom@17/umd/react-
dom.development.js"></script>
const app =
document.getElementById('app');
ReactDOM.render(<h1>Develop.
Preview. Ship.
</h1>, app);
</script>
</body>
</html>
18

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>
<script src="
https://unpkg.com/react@17/umd/react.developm
ent.js"></script>
dom@17/umd/react-dom.development.js"></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

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

// 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>
);
}

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" // } }

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

NEXTjs.pptxfggfgfdgfgfdgfdgfdgfdgfdgfdgfg

More Related Content

Similar to NEXTjs.pptxfggfgfdgfgfdgfdgfdgfdgfdgfdgfg (20)

More from zmulani8 (20)

Recently uploaded (20)

NEXTjs.pptxfggfgfdgfgfdgfdgfdgfdgfdgfdgfg