FullStack React Apps with NextJS

Building Up On React

What Is NextJS & Why Would You Use It?
Routing, Pages & Server Components
Fetching & Sending Data
Styling, Image Upload & Managing Page Metadata

Filesystem-based Routing

NextJS Works With React Server Components

Filenames Matter!

NextJS Renders Pages On The Server

Server-side & Client-side Working Together

Pages & Layouts

Getting Started: Project Structure

Reserved Filenames

As you already learned, there are some reserved filenames when working with NextJS.

Important: These filenames are only reserved when creating them inside of the app/ folder (or any subfolder). Outside of the app/ folder, these filenames are not treated in any special way.

Here's a list of reserved filenames in NextJS - you'll, of course, learn about the important ones throughout this section:

page.js => Create a new page (e.g., app/about/page.js creates a <your-domain>/about page)
layout.js => Create a new layout that wraps sibling and nested pages
not-found.js => Fallback page for "Not Found" errors (thrown by sibling or nested pages or layouts)
error.js => Fallback page for other errors (thrown by sibling pages or nested pages or layouts)
loading.js => Fallback page which is shown whilst sibling or nested pages (or layouts) are fetching data
route.js => Allows you to create an API route (i.e., a page which does NOT return JSX code but instead data, e.g., in the JSON format)

You also find a list with all supported filenames & detailed explanations in the official docs: https://nextjs.org/docs/app/api-reference/file-conventions

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Building Your Application: Styling

Components: Image

Server vs Client Components

Vanilla React Apps Render On The Client

With NextJS, You Build FullStack Applications

npm: better-sqlite3

File Conventions: error.js

File Conventions: not-found.js

'use client' directive – React

'use server' directive – React

useFormStatus – React