100% found this document useful (1 vote)
712 views43 pagesMastering Server-Side Rendering with Next.js
Next.js is a flexible React framework that gives you building blocks to create fast web applications.
Uploaded by
Binumon JosephCopyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
100% found this document useful (1 vote)
712 views43 pagesMastering Server-Side Rendering with Next.js
Next.js is a flexible React framework that gives you building blocks to create fast web applications.
Uploaded by
Binumon JosephCopyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
/ 43
NEXT.
JS
Next.js is a flexible React framework that gives you building blocks to
create fast web applications.
Binumon Joseph, Assistant Professor 1
MASTERING SERVER-SIDE
RENDERING WITH NEXT.JS:
A COMPREHENSIVE
TUTORIAL
Binumon Joseph, Assistant Professor 2
INTRODUCTION
Server-Side Rendering (SSR) is
a technique that allows your
web application to pre-render
HTM L 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.
Binumon Joseph, Assistant Professor 3
WhyUseSSR?
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.
Binumon Joseph, Assistant Professor 4
GETTING STARTED WITH NEXT.JS
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.
Binumon Joseph, Assistant Professor 5
BUILDING PAGESWITH NEXT.JS
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.
Binumon Joseph, Assistant Professor 6
Deploying YourNext.js App
Next.js makes it easy to deploy
your app to Vercel, a cloud
platform for static and serverless
Deploying sites. Vercel provides automatic
Your SSL, custom domains, and
Next.js global CDN. You can also deploy
App to other platforms such as
Heroku or AWS.
Binumon Joseph, Assistant Professor 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!
Binumon Joseph, Assistant Professor 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
application. Binumon Joseph, Assistant Professor 9
React ?
• JavaScript library for building
interactive user interfaces.
• User interfaces, - Elements that
users see and interact with 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.
Interactive User Interface
Binumon Joseph, Assistant
10
Professor
Next.js?
• React framework that 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.
Binumon Joseph, Assistant Professor 11
From JavaScript to React
Binumon Joseph, Assistant Professor 12
Rendering User Interfaces
Binumon Joseph, Assistant Professor 13
DOM vs UI
Binumon Joseph, Assistant Professor 14
UI update with
JavaScript
• Create new file index.html
<html>
<body>
<div id="app"></div>
<script type="text/javascript">
// Select the div element with 'app' id
const app = document.getElementById('app');
// Create a new H1 element
const header = document.createElement('h1');
// Create a new text node for the H1 element
const headerContent = document.createTextNode(
'Develop. Preview. Ship.',
);
// Append the text to the H1 element
header.appendChild(headerContent);
// Place the H1 element inside the div
app.appendChild(header);
</script>
</body>
</html>
Binumon Joseph, Assistant
15
Professor
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
Binumon Joseph, Assistant Professor 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
Binumon Joseph, Assistant Professor 17
Getting Started <!-- index.html -->
with React <html>
<body>
<div id="app"></div>
• To use React in your project, <script
you can load two React scripts src="https://unpkg.com/react@17/umd/react.dev
elopment.js"></script>
from an external website
called unpkg.com: <script src="https://unpkg.com/react-
dom@17/umd/react-
• react is the core React library. dom.development.js"></script>
• react-dom provides DOM- <script type="text/javascript">
specific methods that enable const app = document.getElementById('app');
you to use React with the DOM.
</script>
</body>
</html>
Binumon Joseph, Assistant Professor 18
<!-- index.html -->
Rendering React <html>
<body>
<div id="app"></div>
<script
• Instead of directly manipulating src="https://unpkg.com/react@17/umd/react.dev
the DOM with plain JavaScript, elopment.js"></script>
you can use the <script src="https://unpkg.com/react-
dom@17/umd/react-
ReactDOM.render() method dom.development.js"></script>
from react-dom to tell React to <script type="text/javascript">
render our <h1> title inside our const app = document.getElementById('app');
#app element. ReactDOM.render(<h1>Develop. Preview. Ship.
</h1>, app);
</script>
</body>
</html>
Binumon Joseph, Assistant Professor 19
JSX- JavaScript <html>
<body>
Syntax Extension <div id="app"></div>
<script
src="https://unpkg.com/react@17/umd/react.developm
ent.js"></script>
• JSX is a syntax extension for JavaScript
that allows you to describe your UI in a <script src="https://unpkg.com/react-
dom@17/umd/react-dom.development.js"></script>
familiar HTML-like syntax.
• The nice thing about JSX is that apart from <!-- Babel Script -->
following three JSX rules, you don’t need <script
to learn any new symbols or syntax outside src="https://unpkg.com/@babel/standalone/babel.min.j
s"></script>
of HTML and JavaScript.
<script type="text/jsx">
• Note that browsers don’t understand JSX const app = document.getElementById('app');
out of the box, so you’ll need a JavaScript ReactDOM.render(<h1>Develop. Preview. Ship. </h1>,
compiler, such as a Babel, to transform app);
your JSX code into regular JavaScript. </script>
</body>
</html>
Binumon Joseph, Assistant Professor 20
React Core Concepts
Components
User interfaces can
be broken down into Props State
smaller building
blocks
Binumon Joseph, Assistant Professor 21
Component
Binumon Joseph, Assistant Professor 22
<html>
Component <body>
<div id="app"></div>
<script
src="https://unpkg.com/react@17/umd/react.development.js">
</script>
• Creating components <script src="https://unpkg.com/react-dom@17/umd/react-
dom.development.js"></script>
• In React, components are functions. Inside <script
src="https://unpkg.com/@babel/standalone/babel.min.js"></scr
your script tag, write a function called ipt>
Header <script type="text/jsx">
const app = document.getElementById('app');
function Header() {
return <h1>Develop. Preview. Ship. </h1>;
}
ReactDOM.render(<Header />, app);
</script>
</body>
</html>
Binumon Joseph, Assistant Professor 23
Nesting
Components <script type="text/jsx">
const app = document.getElementById('app');
• Applications usually include more function Header() {
content than a single component. You
return <h1>Develop. Preview. Ship. </h1>;
can nest React components inside
each other like you would regular }
HTML elements. function HomePage() {
return ( <div> <Header /> </div> );
}
ReactDOM.render(<HomePage />, app);
</script>
Binumon Joseph, Assistant Professor 24
Component Trees
Binumon Joseph, Assistant Professor 25
Displaying Data with Props
• Regular HTML elements have attributes that you can use to pass
pieces of information that change the behavior of those elements.
For example, changing the src attribute of an <img> element
changes the image that is shown. Changing the href attribute of an
<a> tag changes the destination of the link.
• In the same way, you can pass pieces of information as properties
to React components. These are called props.
Binumon Joseph, Assistant Professor 26
Using props <script type="text/jsx">
const app = document.getElementById('app');
• In your HomePage component, you function Header(props) {
can pass a custom title prop to the return <h1>{props.title}</h1>;
Header component, just like you’d }
pass HTML attributes
function HomePage() {
return ( <div> <Header title="React 💙" />
<Header title="A new title" /> </div> );
}
ReactDOM.render(<HomePage />, app);
</script>
Binumon Joseph, Assistant Professor 27
Iterating through function HomePage() {
lists
const names = ['Ada Lovelace', 'Grace Hopper',
'Margaret Hamilton’];
return (
• It’s common to have data that you <div>
need to show as a list. You can use <Header title="Develop. Preview. Ship. " />
array methods to manipulate your data
<ul>
and generate UI elements that are
identical in style but hold different {names.map((name) => (
pieces of information. <li key={name}>{name}</li>
))}
</ul>
</div>
);
}
Binumon Joseph, Assistant Professor 28
Adding Interactivity with State
• Listening to Events
• Handling Events
• State and Hooks
Binumon Joseph, Assistant Professor 29
State
function HomePage() {
const [likes, setLikes] = React.useState(0);
• Listening to Events function handleClick() {
• Handling Events setLikes(likes + 1);
• State and Hooks }
return ( <div> {/* ... */}
<button onClick={handleClick}>Likes
({likes})</button>
</div> );
}
Binumon Joseph, Assistant Professor 30
From React to Next.js
Binumon Joseph, Assistant Professor 31
Starting with Next.js
• Install Node.js
• create a new file called package.json with an empty object {}
• In your terminal, run npm install react react-dom next
• Remove
• The react and react-dom scripts since you’ve installed them with NPM.
• The <html> and <body> tags because Next.js will create these for you.
• The code that interacts with app element and ReactDom.render() method.
• The Babel script because Next.js has a compiler that transforms JSX into valid
JavaScript browsers can understand.
• The <script type="text/jsx"> tag.
• The React. part of the React.useState(0) function
Binumon Joseph, Assistant Professor 32
// index.html <ul>
import { useState } from 'react’; {names.map((name) => (
function Header({ title }) { <li key={name}>{name}</li>
return <h1>{title ? title : 'Default ))}
title'}</h1>; </ul>
} <button onClick={handleClick}>Like
function HomePage() { ({likes})</button> </div>
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. " />
Binumon Joseph, Assistant Professor 33
Changing Environment
1. Move the index.js file to a new folder called pages (more on this
later).
2. Add default export 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() {
Add a script to your package.json 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" // } }
Binumon Joseph, Assistant Professor 34
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);
} npm run dev
return ( <div> <Header title="Develop. Preview. Ship. " />
<ul>
{names.map((name) => (
<li key={name}>{name}</li>
))}
</ul>
<button onClick={handleClick}>Like ({likes})</button>
</div> );
}
Binumon Joseph, Assistant Professor 35
Create a Next.js App
npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
Binumon Joseph, Assistant Professor 36
Link Component
• On your pages/index.js
import Link from 'next/link';
• To include link
<Link href="/posts/first-post">this page!</Link>
Binumon Joseph, Assistant Professor 37
Assets, Metadata, and CSS
• Image Component and Image Optimization
import Image from 'next/image’;
return(
<Image src="/images/profile.jpg" // Route of the image file
height={144} // Desired size with correct aspect ratio
width={144} // Desired size with correct aspect ratio
alt="Your Name" />
);
Binumon Joseph, Assistant Professor 38
Adding Head
import Head from 'next/head';
export default function FirstPost() {
return ( <>
<Head> <title>First Post</title> </Head>
<h1>First Post</h1>
<h2> <Link href="/">← Back to home</Link> </h2> </>
);
}
Binumon Joseph, Assistant Professor 39
Adding CSS
• Create a file called components/layout.module.css with the
following content:
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
}
Binumon Joseph, Assistant Professor 40
Adding CSS
• Create a top-level directory called components.
• Inside components, create a file called layout.js with the following
content:
import styles from './layout.module.css’;
export default function Layout({ children }) {
return <div className={styles.container}>{children}</div>;
}
Binumon Joseph, Assistant Professor 41
Adding CSS
import Head from 'next/head’;
import Link from 'next/link’;
import Layout from '../../components/layout’;
export default function FirstPost() {
return ( <Layout>
<Head> <title>First Post</title> </Head>
<h1>First Post</h1>
<h2> <Link href="/">← Back to home</Link> </h2>
</Layout>
);
}
Binumon Joseph, Assistant Professor 42
THANKS
Do you have any questions?
binumonjosephk@amaljyothi.ac.in
+919539 373 171
