Lecture 4: Building Full-Stack React Apps using

Next.js

1
 What is Next.js?
 Next.js Main Features
 App Router vs Pages Router
 Next.js Automatic Installation
 Building Your Application with Next.js
 Next.js Project Structure
 Routing and Rendering
 Create a Next.js App Tutorial

2
 Next.js is a React Framework for Building Full-
Stack Web Applications
 You use React Components to build User
Interfaces, and Next.js for additional Features
and Optimizations
 Under the hood, Next.js also abstracts and
automatically configures tooling needed for
React
◦ Like bundling, compiling, and more
◦ This allows you to focus on building your
application instead of spending time with
configuration

3
 Routing
◦ A file-system based router built on top of Server
Components that supports layouts, nested routing,
loading states, error handling, and more
 Data Fetching
◦ Simplified data fetching with async/await in Server
Components,
◦ An extended fetch API for request memoization, data
caching, and revalidation
 Styling
◦ Support for your preferred styling methods, including
CSS Modules, Tailwind CSS, and CSS-in-JS
 TypeScript
◦ Improved support for TypeScript, with better type
checking and more efficient compilation

4
 Rendering
◦ Client-side and Server-side Rendering with Client and
Server Components

5
 Next.js uses file-system routing, which
means the routes in your application are
determined by how you structure your
files
 Next.js has Two Different Routers:
◦ The App Router and the Pages Router
 The App Router is a newer router that
allows you to use React's latest features,
such as Server Components
 The Pages Router is the original Next.js
router, which allowed you to build
server-rendered React Applications
6
 Next.js recommends using the App
Router
 In version 13, Next.js introduced a
new App Router built on React Server
Components
 The App Router works in a new
directory named app

7
 To create a project, run:
◦ npx create-next-app@latest
 On installation, you'll see the following
prompts:
1. What is your project named? my-app
2. Would you like to use TypeScript? No / Yes
3. Would you like to use ESLint? No / Yes
4. Would you like to use Tailwind CSS? No / Yes
5. Would you like to use `src/` directory? No /
Yes
6. Would you like to use App Router?
(recommended) No / Yes
8
 Top-Level Folders
◦ app: App Router
◦ pages: Pages Router
◦ public: Static assets to be served
◦ src: Optional application source folder
 Top-Level Files:
◦ next.config.js: Configuration file for Next.js
◦ package.json: Project dependencies and scripts
◦ .env: Environment variables
◦ .env.local: Local environment variables
◦ tsconfig.json: Configuration file for TypeScript
◦ jsconfig.json: Configuration file for JavaScript
9
 This tutorial will guide you through
how to get started with Next.js
◦ https://nextjs.org/learn-pages-
router/basics/create-nextjs-app
 In this tutorial, you’ll learn Next.js
basics by creating a very simple blog
app
◦ App: https://next-learn-starter.vercel.app
◦ Source: https://github.com/vercel/next-
learn/tree/main/basics/demo

10
 To create a Next.js app, open your
terminal, cd into the directory you’d
like to create the app in, and run the
following command:
◦ npx create-next-app@latest nextjs-blog --use-
npm --example https://github.com/vercel/next-
learn/tree/main/basics/learn-starter
 Run the development server
◦ cd nextjs-blog
◦ npm run dev

11
 You should see a page like this when
you access http://localhost:3000
 This is the starter template page
which shows some helpful information
about Next.js

12
 Open pages/index.js with your text
editor
 Find the text that says “Welcome to”
under the <h1> tag and change it to
“Learn”
 As soon as you save the file, the
browser automatically updates the
page with the new text:

13
 In Next.js, a page is a React
Component exported from a file in the
pages directory
 Pages are associated with a route
based on their file name
 For example:
◦ pages/index.js is associated with the /
route
◦ pages/posts/first-post.js is associated
with the /posts/first-post route

14
 Create the posts directory under
pages
 Create a file called first-post.js inside
the posts directory with the following
content:
export default function FirstPost() {
return <h1>First Post</h1>;
}
 The component can have any name,
but you must export it as a default
export
15
 Now, make sure that the development
server is running and visit:
◦ http://localhost:3000/posts/first-post
 You should see the page:

 This is how you can create pages in

Next.js
 Simply create a JS file under the pages
directory, and the path to the file
becomes the URL path
16
 When linking between pages on
websites, you use the <a> HTML tag
 In Next.js, you can use the Link
Component next/link to link between
pages in your application
 <Link> allows you to do client-side
navigation and accepts props that give
you better control over the navigation
behavior

17
 First, open pages/index.js, and import
the Link component from next/link by
adding this line at the top:
import Link from 'next/link';
 Then find the h1 tag that looks like this:
<h1 className={styles.title}>
Learn <a href="https://nextjs.org">Next.js!</a>
</h1>
 And change it to:
<h1 className={styles.title}>
Read <Link href="/posts/first-post">this page!</Link>
</h1>
18
 Next, open pages/posts/first-post.js
and replace its content with the
following:
import Link from 'next/link';
export default function FirstPost() {
return (
<>
<h1>First Post</h1>
<h2>
<Link href="/">Back to home</Link>
</h2>
</>
);
}
19