Get startedProject Structure
Project Structure
Runway follows a typical Next.js project structure with some custom organization. Here's an overview of the main directories and files:
Top-level Structure
At the root of the project, you'll find these key elements:
| Folder/File | Description |
|---|---|
src/ | Contains all the application source code |
public/ | Stores static assets to be served directly |
.env.local | Holds local environment variables |
package.json | Lists project dependencies and scripts |
The src folder contains all of our application code, while public is for static assets. The .env.local file stores all
our local environment variables (API keys, etc.).
Warning!
Never commit your .env.local file to version control. It contains sensitive information like API keys and should be kept private.
src Folder Structure
Inside the src folder, we organize our code into several directories:
| Path | Description |
|---|---|
app | Contains the Next.js 13+ App Router structure |
components | Houses React components organized by atomic design |
contexts | Stores React context providers for global state management |
libs | Contains shared libraries and utilities (e.g., Stripe, Mailgun) |
utils | Holds utility functions used across the application |
This structure allows for a modular approach to development, separating concerns and making it easier to find and maintain different parts of the application.
Check out the Components documentation for more information on the atomic design methodology.
Info
The src folder is optional in Next.js, but it's a good practice for keeping your project root clean and organized.
app Directory Structure
The app directory is the heart of our Next.js application, structured as follows:
| Path | Description |
|---|---|
(auth) | Contains routes that require user authentication |
(noauth) | Houses public routes accessible without authentication |
actions | Stores server actions for handling form submissions and data mutations |
api | Contains API routes for backend functionality |
auth | Holds authentication-related files and logic |
lib | Stores library files specific to the app directory |
This structure leverages Next.js 13's app router, allowing for easy organization of authenticated and public routes.
Tip!
Use route groups (folders starting with parentheses) to organize your routes without affecting the URL structure.
(noauth) Directory
The (noauth) directory contains our public-facing pages:
| Path | Description |
|---|---|
docs | Documentation pages for users and developers |
login | The user login page |
policies | Legal pages such as privacy policy and terms of service |
sign-up | The user registration page |
(auth) Directory
The (auth) directory contains our authenticated pages, add as many as needed.
Info
Runway automatically redirects users to the login page if they try to access an authenticated route without being logged in.
components Directory
We use the atomic design methodology to organize our React components:
| Path | Description |
|---|---|
atoms | Basic building blocks like buttons, inputs, and labels |
molecules | Slightly more complex components composed of atoms |
organisms | Large, complex components often composed of molecules and atoms |
This structure promotes reusability and maintainability of our UI components.
Tip!
When creating new components, consider their reusability. If a component is used in multiple places, it might belong in the atoms or molecules directory.
Configuration Files
Key configuration files in our project:
| Path | Description |
|---|---|
src/config.js | Central configuration file for application-wide settings |
src/middleware.js | Next.js middleware for route protection and redirects |
These files are crucial for managing application behavior and security.
app Routing Conventions
We follow Next.js routing conventions in our app directory:
| File | Description |
|---|---|
layout.js .jsx .tsx | Defines the layout for a route segment |
page.js .jsx .tsx | Represents a UI that is unique to a route |
loading.js .jsx .tsx | Creates loading UI for a segment |
not-found.js .jsx .tsx | Creates not found UI for a segment |
error.js .jsx .tsx | Defines error UI for a segment |
route.js .ts | Creates API endpoints |
These conventions allow for intuitive and powerful routing capabilities within our Next.js application.
Tip!
Use loading.js to create seamless loading experiences for your users. It's automatically used by Next.js for route segments.
Warning!
Be cautious when using route.js in the same directory as page.js. They can conflict and lead to unexpected behavior.
This structure allows for a clear separation of concerns, making it easier to navigate and maintain the project as it grows. For more detailed information on specific parts of the project, refer to the related documentation pages.