Since my experience in front-end development is mostly with React, I recently
built a full-stack movie app using Next.js App Router and PostgreSQL to get
more comfortable with these technologies. The app lets you search,
add, edit, and delete movies, and supports authentication. It is open source.
This post serves as a companion to the source code, aiming to help you
understand the project by providing an overview of the project structure
along with explanations of various files and directories. If you’re
interested in a specific file, you can dive into the source code, which
also contains comments.
It’s assumed that you have a basic familiarity with the Next.js App
Router.
Below is the project structure with explanations. Feel free to expand
the folders you’re interested in.
movie-app source code:
+
app
This is the Next.js app directory. The Next.js app directory is essentially a routing system that uses folders and special files (e.g. page.tsx) to define routes. It also supports layouts which is basically a UI that is shared between multiple pages.
+
components
Inside this folder, components using client-specific features (e.g. state, effects) go in the client folder. Those using server-specific features (e.g. async components) go in the server folder. Components that use neither can technically work in both contexts (for example if they're imported by a client component, they'll automatically become part of the client bundle) - so they are placed outside of these folders.
+
lib
Folder for some server-side logic.
+
server-functions
Server functions allow client components to call asynchronous functions that are executed on the server. When that function is called on the client, React will send a request to the server to execute the function, and return the result. They are used for updating data.
middleware.ts
Middleware for protecting routes based on authentication.
utils.ts
Shared utilities for server and client.
Source Code
You can find the source code here.