diff --git a/docs/README.md b/docs/README.md
index 94cfad7b30..7729fd7500 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,14 +1,8 @@
 # React on Rails Documentation
 
-> **Integrate React components seamlessly into your Rails application with server-side rendering, hot reloading, and more.**
+> For the best experience, visit our **[documentation website](https://www.shakacode.com/react-on-rails/docs/)**.
 
-## 🚀 Quick Start
-
-New to React on Rails? Start here for the fastest path to success:
-
-**→ [15-Minute Quick Start Guide](./getting-started/quick-start.md)**
-
-Already have Rails + Shakapacker? **→ [Add to existing app guide](./getting-started/installation-into-an-existing-rails-app.md)**
+Browsing on GitHub? This guide will help you navigate the documentation.
 
 ## 📚 Learning Paths
 
@@ -18,17 +12,17 @@ Choose your journey based on your experience level:
 
 Perfect if you're new to React on Rails
 
-1. **[Quick Start](./getting-started/quick-start.md)** - Get your first component running
-2. **[Core Concepts](./getting-started.md)** - Understand the basics
-3. **[Tutorial](./getting-started/tutorial.md)** - Build something useful
+1. **[Introduction](./introduction.md)** - What is React on Rails and why use it?
+2. **[Quick Start](./getting-started/quick-start.md)** - Get your first component running in 15 minutes
+3. **[Tutorial](./getting-started/tutorial.md)** - Build a complete app with Redux and routing
 
 ### ⚡ **Experienced Developer Path**
 
-Jump to what you need
+Jump straight to what you need
 
-- **[Installation Guide](./getting-started/installation-into-an-existing-rails-app.md)** - Detailed setup
-- **[API Reference](./api-reference/README.md)** - Quick lookup
-- **[Advanced Features](./guides/advanced/README.md)** - SSR, Redux, Router
+- **[Installation Guide](./getting-started/installation-into-an-existing-rails-app.md)** - Add to existing Rails app
+- **[API Reference](./api-reference/view-helpers-api.md)** - View helpers, configuration, JavaScript API
+- **[Core Concepts](./core-concepts/how-react-on-rails-works.md)** - Architecture and SSR
 
 ### 🏗️ **Migrating from Other Solutions**
 
@@ -48,125 +42,23 @@ Find guidance for your specific scenario:
 | **Deploy to production**            | [Deployment Guide](./deployment/deployment.md)                                        |
 | **Troubleshoot issues**             | [Troubleshooting](./deployment/troubleshooting.md)                                    |
 
-## 📖 Complete Documentation
-
-### Core Guides
-
-- **[Getting Started](./getting-started.md)** - Installation and basic setup
-- **[Tutorial](./getting-started/tutorial.md)** - Complete walkthrough with examples
-- **[Configuration](./api-reference/configuration.md)** - All configuration options
-- **[View Helpers](./api-reference/view-helpers-api.md)** - Using `react_component` method
-
-### Features
-
-- **[Server-Side Rendering](./core-concepts/react-server-rendering.md)** - SSR setup and optimization
-- **[Auto-Bundling](./core-concepts/auto-bundling-file-system-based-automated-bundle-generation.md)** - Automatic bundle generation
-- **[Redux Integration](./building-features/react-and-redux.md)** - State management with Redux
-- **[React Router](./building-features/react-router.md)** - Client-side routing
-- **[Internationalization](./building-features/i18n.md)** - I18n support
-
-### Development
-
-- **[Hot Module Replacement](./building-features/hmr-and-hot-reloading-with-the-webpack-dev-server.md)** - Fast development workflow
-- **[Testing](./building-features/rspec-configuration.md)** - Testing React components
-- **[Debugging](./deployment/troubleshooting-build-errors.md)** - Common debugging techniques
-
-### Deployment & Performance
+## 📖 Documentation Categories
 
-- **[Deployment](./deployment/deployment.md)** - Production deployment guide
-- **[Performance](./core-concepts/webpack-configuration.md)** - Optimization techniques
-- **[Bundle Optimization](./core-concepts/webpack-configuration.md)** - Reduce bundle size
+- **[Getting Started](./getting-started/)** - Installation, quick start, tutorial
+- **[Core Concepts](./core-concepts/)** - How React on Rails works, SSR, auto-bundling
+- **[Building Features](./building-features/)** - Redux, routing, i18n, testing
+- **[API Reference](./api-reference/)** - View helpers, configuration, JavaScript API
+- **[Deployment](./deployment/)** - Production deployment and troubleshooting
+- **[Upgrading](./upgrading/)** - Version upgrade guides
+- **[Migrating](./migrating/)** - From other frameworks
+- **[Pro](./pro/)** - React on Rails Pro features
 
 ## 🆘 Need Help?
 
-### Quick Solutions
-
 - **[Troubleshooting Guide](./deployment/troubleshooting.md)** - Common issues and solutions
-- **[FAQ](./deployment/troubleshooting.md)** - Frequently asked questions
-- **[Error Messages](./deployment/troubleshooting-build-errors.md)** - Decode error messages
-
-### Community Support
-
-- **[React + Rails Slack](https://reactrails.slack.com)** - Real-time community help
 - **[GitHub Discussions](https://github.com/shakacode/react_on_rails/discussions)** - Ask questions
-- **[GitHub Issues](https://github.com/shakacode/react_on_rails/issues)** - Report bugs
-
-### Professional Support
-
-- **[ShakaCode Support](mailto:react_on_rails@shakacode.com)** - Professional React on Rails help
-- **[React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/)** - Advanced features and support
-
-## 🔗 External Resources
-
-- **[Shakapacker Documentation](https://github.com/shakacode/shakapacker)** - Webpack integration for Rails
-- **[React Documentation](https://react.dev)** - Official React docs
-- **[Rails Guides](https://guides.rubyonrails.org)** - Ruby on Rails documentation
+- **[React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/)** - Advanced features and professional support
 
 ---
 
-## 📚 Table of Contents
-
-### API Reference
-
-- [View Helpers API](./api-reference/view-helpers-api.md)
-- [Redux Store API](./api-reference/redux-store-api.md)
-- [JavaScript API](./api-reference/javascript-api.md)
-
-### Guides
-
-#### Getting Started
-
-- [Installation](./getting-started.md)
-- [Tutorial](./getting-started/tutorial.md)
-- [Basic Configuration](./api-reference/configuration.md)
-
-#### Core Features
-
-- [Server-Side Rendering](./core-concepts/react-server-rendering.md)
-- [Component Registration](./core-concepts/render-functions-and-railscontext.md)
-- [Props and RailsContext](./core-concepts/render-functions-and-railscontext.md)
-
-#### State Management
-
-- [Redux Integration](./building-features/react-and-redux.md)
-- [Context API](./core-concepts/render-functions-and-railscontext.md)
-
-#### Routing
-
-- [React Router Setup](./building-features/react-router.md)
-- [Server-Side Routing](./core-concepts/react-server-rendering.md)
-
-#### Advanced Topics
-
-- [Webpack Configuration](./core-concepts/webpack-configuration.md)
-- [Code Splitting](./building-features/code-splitting.md)
-- [Performance Optimization](./core-concepts/webpack-configuration.md)
-
-#### Development
-
-- [Hot Module Replacement](./building-features/hmr-and-hot-reloading-with-the-webpack-dev-server.md)
-- [Testing Components](./building-features/rspec-configuration.md)
-- [Debugging](./deployment/troubleshooting-build-errors.md)
-
-#### Deployment
-
-- [Production Setup](./deployment/deployment.md)
-- [Heroku Deployment](./deployment/deployment.md)
-- [Docker Setup](./deployment/deployment.md)
-
-### Migration Guides
-
-- [Upgrading React on Rails](./upgrading/upgrading-react-on-rails.md)
-- [From react-rails gem](./migrating/migrating-from-react-rails.md)
-
-### Troubleshooting
-
-- [Common Issues](./deployment/troubleshooting.md)
-- [Error Messages](./deployment/troubleshooting-build-errors.md)
-- [Performance Issues](./deployment/troubleshooting-build-errors.md)
-
-### Contributing
-
-- [Contributing Guide](../CONTRIBUTING.md)
-- [Development Setup](../CONTRIBUTING.md)
-- [Pull Request Guidelines](../CONTRIBUTING.md)
+**💡 Tip:** For the best reading experience with full navigation and search, visit the [documentation website](https://www.shakacode.com/react-on-rails/docs/).
diff --git a/docs/advanced-topics/manual-installation-overview.md b/docs/advanced-topics/manual-installation-overview.md
deleted file mode 100644
index 6535ce4b91..0000000000
--- a/docs/advanced-topics/manual-installation-overview.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# Manual Installation Overview
-
-TODO: Review this file
-
-This file summarizes what the React on Rails generator does.
-
-## Configure the `/client` Directory
-
-This directory has no references to Rails outside of the destination directory for the files created by the various Webpack config files.
-
-The only requirements within this directory for basic React on Rails integration are:
-
-1. Your Webpack configuration files:
-   1. Create outputs in a directory like `/public/webpack`, which is customizable in your `config/initializers/react_on_rails.rb`.
-   1. Provide server rendering if you wish to use that feature.
-1. Your JavaScript code "registers" any components and stores per the ReactOnRails APIs of ReactOnRails.register(components) and ReactOnRails.registerStore(stores). See [our JavaScript API docs](../api-reference/javascript-api.md) and the [React on Rails source](https://github.com/shakacode/react_on_rails/tree/master/packages/react-on-rails/src/ReactOnRails.client.ts).
-1. Set your registration file as an "entry" point in your Webpack configs.
-1. Configure scripts in `client/package.json` as shown in the example apps. These are used for building your Webpack assets. Also do this for your top-level `package.json`.
-
-## Rails Steps (outside `/client`)
-
-1. Add `gem "shakapacker"` to the Gemfile, run `bundle`. The gem provides the `stylesheet_pack_tag` and `javascript_pack_tag` helpers, which are used to load the bundled assets in your layouts. [Dummy Example](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/views/layouts/application.html.erb).
-1. Configure the `config/initializers/react_on_rails.rb`. You can adjust some necessary settings and defaults. See file [https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/initializers/react_on_rails.rb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/initializers/react_on_rails.rb) for a detailed example of configuration, including comments on the different values to configure.
-1. Configure your Procfiles per the example apps. These are at the root of your Rails installation.
-1. Configure your top-level JavaScript files for inclusion in your layout. Use one file for static assets, and a separate file for any files in your setup that are not part of your Webpack build. This separation is needed for hot reloading. If hot reloading is not needed, simply configure your `application.js` file to include the Webpack-generated files.
-1. If you are deploying to Heroku, see [our Heroku deployment documentation](../deployment/heroku-deployment.md).
-
-If I missed anything, please submit a PR or file an issue.
diff --git a/docs/advanced-topics/rails-engine-integration.md b/docs/advanced-topics/rails-engine-integration.md
index 50814109c4..433dade798 100644
--- a/docs/advanced-topics/rails-engine-integration.md
+++ b/docs/advanced-topics/rails-engine-integration.md
@@ -1,3 +1,5 @@
+# Integrating React on Rails with Rails Engines
+
 ## In your engine
 
 - At the top of `config/initializers/react_on_rails.rb`
@@ -30,7 +32,7 @@ As far as solving the assets issue, `lib/tasks/assets.rake` in `react_on_rails`
 
 Another solution would be to detach this rake task from the `rails assets:precompile` task. This can be done by adding `REACT_ON_RAILS_PRECOMPILE=false` to your environment. If you do so, then React assets will have to be bundled separately from `rails assets:precompile`.
 
-# Github Issues
+## Github Issues
 
 - [Integration with an engine #342](https://github.com/shakacode/react_on_rails/issues/342)
 - [Feature: target destination option for the install generator #459](https://github.com/shakacode/react_on_rails/issues/459)
diff --git a/docs/api-reference/README.md b/docs/api-reference/README.md
deleted file mode 100644
index aa5aa7cc4b..0000000000
--- a/docs/api-reference/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# API Reference
-
-Complete API documentation for React on Rails.
-
-- [View Helpers API](../api-reference/view-helpers-api.md)
-- [Redux Store API](../api-reference/redux-store-api.md)
-- [JavaScript API](../api-reference/javascript-api.md)
diff --git a/docs/api-reference/configuration.md b/docs/api-reference/configuration.md
index 34ddbfffbe..96391204da 100644
--- a/docs/api-reference/configuration.md
+++ b/docs/api-reference/configuration.md
@@ -1,3 +1,5 @@
+# React on Rails Configuration Options
+
 Here is the full set of config options. This file is `/config/initializers/react_on_rails.rb`
 
 First, you should have a `/config/shakapacker.yml` setup.
diff --git a/docs/api-reference/generator-details.md b/docs/api-reference/generator-details.md
index 0478cba2d0..fd862f49e8 100644
--- a/docs/api-reference/generator-details.md
+++ b/docs/api-reference/generator-details.md
@@ -39,20 +39,80 @@ Then you may run
 
 Another good option is to create a simple test app per the [Tutorial](../getting-started/tutorial.md).
 
-# Understanding the Organization of the Generated Client Code
+## Understanding the Organization of the Generated Client Code
 
-The generated client code follows our organization scheme. Each unique set of functionality is given its own folder inside of `app/javascript/app/bundles`. This encourages modularity of _domains_.
+The React on Rails generator creates different directory structures depending on whether you use the `--redux` option.
 
-Inside the generated "HelloWorld" domain you will find the following folders:
+### Default Structure (Without Redux)
 
-- `startup`: contains the entry point files for webpack. It defaults to a single file that is used for both server and client compilation. But if these need to be different, then you can create two Webpack configurations with separate endpoints. Since RoR v14.2 this is strongly recommended because the client can import `react-on-rails/client` instead of `react-on-rails` for decreased bundle size.
-- `containers`: contains "smart components" (components that have functionality and logic that is passed to child "dumb components").
-- `components`: contains "dumb components", or components that simply render their properties and call functions given to them as properties by a parent component. Ultimately, at least one of these dumb components will have a parent container component.
+The basic generator creates a simple, flat structure optimized for auto-bundling:
 
-You may also notice the `app/lib` folder. This is for any code that is common between bundles and therefore needs to be shared (for example, middleware).
+```
+app/javascript/
+└── src/
+    └── HelloWorld/
+        └── ror_components/          # Components auto-registered by React on Rails
+            ├── HelloWorld.jsx       # Your React component
+            ├── HelloWorld.module.css
+            └── HelloWorld.server.js # Optional: separate server rendering logic
+```
+
+- **`src/`**: Source directory for all React components
+- **`ror_components/`**: Directory name is configurable via `config.components_subdirectory` in `config/initializers/react_on_rails.rb`
+- **Auto-registration**: Components in `ror_components/` directories are automatically discovered and registered when using `auto_load_bundle: true`
+
+For components that need different client vs. server implementations, use `.client.jsx` and `.server.jsx` suffixes (e.g., `HelloWorld.client.jsx` and `HelloWorld.server.jsx`).
+
+### Redux Structure (With `--redux` Option)
+
+The Redux generator creates a more structured organization with familiar Redux patterns:
+
+```
+app/javascript/
+└── src/
+    └── HelloWorldApp/
+        ├── actions/                 # Redux action creators
+        │   └── helloWorldActionCreators.js
+        ├── components/              # Presentational components
+        │   ├── HelloWorld.jsx
+        │   └── HelloWorld.module.css
+        ├── constants/               # Action type constants
+        │   └── helloWorldConstants.js
+        ├── containers/              # Connected components (smart components)
+        │   └── HelloWorldContainer.js
+        ├── reducers/                # Redux reducers
+        │   └── helloWorldReducer.js
+        ├── ror_components/          # Auto-registered entry points
+        │   ├── HelloWorldApp.client.jsx
+        │   └── HelloWorldApp.server.jsx
+        └── store/                   # Redux store configuration
+            └── helloWorldStore.js
+```
+
+This structure follows Redux best practices:
+
+- **`components/`**: Presentational "dumb" components that receive data via props
+- **`containers/`**: Container "smart" components connected to Redux store
+- **`actions/`** and **`reducers/`**: Standard Redux patterns
+- **`ror_components/`**: Entry point files that initialize Redux and render the app
+
+### TypeScript Support
+
+The generator also supports a `--typescript` option for generating TypeScript files:
+
+```bash
+rails generate react_on_rails:install --typescript
+```
+
+This creates `.tsx` files instead of `.jsx` and adds TypeScript configuration.
+
+### Auto-Bundling and Component Registration
 
-## Redux
+Modern React on Rails uses auto-bundling to eliminate manual webpack configuration. Components placed in the configured `components_subdirectory` (default: `ror_components`) are automatically:
 
-If you have used the `--redux` generator option, you will notice the familiar additional redux folders in addition to the aforementioned folders. The Hello World example has also been modified to use Redux.
+1. Discovered by the generator
+2. Bundled into separate webpack entry points
+3. Registered for use with `react_component` helper
+4. Loaded on-demand when used in views
 
-Note the organizational paradigm of "bundles". These are like application domains and are used for grouping your code into webpack bundles, in case you decide to create different bundles for deployment. This is also useful for separating out logical parts of your application. The concept is that each bundle will have it's own Redux store. If you have code that you want to reuse across bundles, including components and reducers, place them under `/client/app/lib`.
+For detailed information on auto-bundling, see the [Auto-Bundling Guide](../core-concepts/auto-bundling-file-system-based-automated-bundle-generation.md).
diff --git a/docs/api-reference/redux-store-api.md b/docs/api-reference/redux-store-api.md
index ba86fa3b0b..a09dd09b69 100644
--- a/docs/api-reference/redux-store-api.md
+++ b/docs/api-reference/redux-store-api.md
@@ -98,7 +98,7 @@ This method has the same API as the controller extension. **HOWEVER**, we recomm
 
 Place this view helper (no parameters) at the end of your shared layout so ReactOnRails will render the redux store hydration data. Since we're going to be setting up the stores in the controllers, we need to know where on the view to put the client-side rendering of this hydration data, which is a hidden div with a matching class that contains a data props. For an example, see [spec/dummy/app/views/layouts/application.html.erb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/views/layouts/application.html.erb).
 
-# More Details
+## More Details
 
 - [lib/react_on_rails/controller.rb](https://github.com/shakacode/react_on_rails/tree/master/lib/react_on_rails/controller.rb) source
 - [lib/react_on_rails/helper.rb](https://github.com/shakacode/react_on_rails/tree/master/lib/react_on_rails/helper.rb) source
diff --git a/docs/api-reference/view-helpers-api.md b/docs/api-reference/view-helpers-api.md
index c3100fedf6..536b2efbcd 100644
--- a/docs/api-reference/view-helpers-api.md
+++ b/docs/api-reference/view-helpers-api.md
@@ -90,7 +90,9 @@ You can call `rails_context` or `rails_context(server_side: true|false)` from yo
 
 A "renderer function" is a Render-Function that accepts three arguments (rather than 2): `(props, railsContext, domNodeId) => { ... }`. Instead of returning a React component, a renderer is responsible for installing a callback that will call `ReactDOM.render` (in React 16+, `ReactDOM.hydrate`) to render a React component into the DOM. The "renderer function" is called at the same time the document ready event would instantiate the React components into the DOM.
 
-Why would you want to call `ReactDOM.hydrate` yourself? One possible use case is [code splitting](../building-features/code-splitting.md). In a nutshell, you don't want to load the React component on the DOM node yet. So you want to install some handler that will call `ReactDOM.hydrate` at a later time. In the case of code splitting with server rendering, the server rendered code has any async code loaded and used to server render. Thus, the client code must also fully load any asynch code before server rendering. Otherwise, the client code would first render partially, not matching the server rendering, and then a second later, the full code would render, resulting in an unpleasant flashing on the screen.
+Why would you want to call `ReactDOM.hydrate` yourself? One possible use case is code splitting. In a nutshell, you don't want to load the React component on the DOM node yet. So you want to install some handler that will call `ReactDOM.hydrate` at a later time. In the case of code splitting with server rendering, the server-rendered code has any async code loaded and used to server render. Thus, the client code must also fully load any async code before server rendering. Otherwise, the client code would first render partially, not matching the server rendering, and then a second later, the full code would render, resulting in an unpleasant flashing on the screen.
+
+For modern code splitting with server-side rendering, see the [React on Rails Pro loadable-components guide](https://www.shakacode.com/react-on-rails-pro/docs/code-splitting-loadable-components).
 
 Renderer functions are not meant to be used on the server since there's no DOM on the server. Instead, use a Render-Function. Attempting to server render with a renderer function will throw an error.
 
@@ -102,7 +104,7 @@ Renderer functions are not meant to be used on the server since there's no DOM o
 
 1. [React on Rails docs for React Router](../building-features/react-router.md)
 2. Examples in [spec/dummy/app/views/react_router](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/views/react_router) and follow to the JavaScript code in the [spec/dummy/client/app/startup/RouterApp.server.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/RouterApp.server.jsx).
-3. [Code Splitting docs](../building-features/code-splitting.md) for information about how to set up code splitting for server rendered routes.
+3. [React on Rails Pro loadable-components guide](https://www.shakacode.com/react-on-rails-pro/docs/code-splitting-loadable-components) for modern code splitting with server-side rendering.
 
 ---
 
@@ -158,6 +160,6 @@ See the [React on Rails Pro Configuration](https://github.com/shakacode/react_on
 
 ---
 
-# More details
+## More details
 
 See the [lib/react_on_rails/helper.rb](https://github.com/shakacode/react_on_rails/tree/master/lib/react_on_rails/helper.rb) source.
diff --git a/docs/building-features/code-splitting.md b/docs/building-features/code-splitting.md
deleted file mode 100644
index 78b6dc0633..0000000000
--- a/docs/building-features/code-splitting.md
+++ /dev/null
@@ -1,167 +0,0 @@
-# Code Splitting (Outdated)
-
-_Note: This document is outdated._ Please email [justin@shakacode.com](mailto:justin@shakacode.com)
-if you would be interested in help with code splitting using
-[loadable-components.com](https://loadable-components.com/docs) with React on Rails.
-
----
-
-What is code splitting? From the Webpack documentation:
-
-> For big web apps it’s not efficient to put all code into a single file, especially if some blocks of code are only required under some circumstances. Webpack has a feature to split your codebase into “chunks” which are loaded on demand. Some other bundlers call them “layers”, “rollups”, or “fragments”. This feature is called “code splitting”.
-
-## Server Rendering and Code Splitting
-
-Let's say you're requesting a page that needs to fetch a code chunk from the server before it's able to render. If you do all your rendering on the client side, you don't have to do anything special. However, if the page is rendered on the server, you'll find that React will spit out the following error:
-
-> Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
-
-> (client) `<!-- react-empty: 1 -`
-
-> (server) `<div data-reactroot="`
-
-Different markup is generated on the client than on the server. Why does this happen? When you register a component or Render-Function with `ReactOnRails.register`, React on Rails will render the component as soon as the page loads. However, React Router renders a comment while waiting for the code chunk to be fetched from the server. This means that React will tear all the server rendered code out of the DOM, and then rerender it a moment later once the code chunk arrives from the server, defeating most of the purpose of server rendering.
-
-### The solution
-
-To prevent this, you have to wait until the code chunk is fetched before doing the initial render on the client side. To accomplish this, React on Rails allows you to register a renderer. This works just like registering a Render-Function, except that the function you pass takes three arguments: `renderer(props, railsContext, domNodeId)`, and is responsible for calling `ReactDOM.render` or `ReactDOM.hydrate` to render the component to the DOM. React on Rails will automatically detect when a Render-Function takes three arguments, and will **not** call `ReactDOM.render` or `ReactDOM.hydrate`, instead allowing you to control the initial render yourself. Note, you have to be careful to call `ReactDOM.hydrate` rather than `ReactDOM.render` if you are server rendering.
-
-Here's an example of how you might use this in practice:
-
-#### page.html.erb
-
-```erb
-<%= react_component("NavigationApp", prerender: true) %>
-<%= react_component("RouterApp", prerender: true) %>
-<%= redux_store_hydration_data %>
-```
-
-#### clientRegistration.js
-
-```js
-import ReactOnRails from 'react-on-rails/client';
-import NavigationApp from './NavigationApp';
-
-// Note that we're importing a different RouterApp than in serverRegistration.js
-// Renderer functions should not be used on the server, because there is no DOM.
-import RouterApp from './RouterAppRenderer';
-import applicationStore from '../store/applicationStore';
-
-ReactOnRails.registerStore({ applicationStore });
-ReactOnRails.register({
-  NavigationApp,
-  RouterApp,
-});
-```
-
-#### serverRegistration.js
-
-```js
-import ReactOnRails from 'react-on-rails';
-import NavigationApp from './NavigationApp';
-
-// Note that we're importing a different RouterApp than in clientRegistration.js
-import RouterApp from './RouterAppServer';
-import applicationStore from '../store/applicationStore';
-
-ReactOnRails.registerStore({ applicationStore });
-ReactOnRails.register({
-  NavigationApp,
-  RouterApp,
-});
-```
-
-Note that you should not register a renderer on the server, since there won't be a domNodeId when we're server rendering. Note that the `RouterApp` imported by `serverRegistration.js` is from a different file. For an example of how to set up an app for server rendering, see the [react router docs](../building-features/react-router.md).
-
-#### RouterAppRenderer.jsx
-
-```jsx
-import ReactOnRails from 'react-on-rails/client';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Router from 'react-router/lib/Router';
-import match from 'react-router/lib/match';
-import browserHistory from 'react-router/lib/browserHistory';
-import { Provider } from 'react-redux';
-
-import routes from '../routes/routes';
-
-// NOTE how this function takes 3 params, and is thus responsible for calling ReactDOM.render
-const RouterAppRenderer = (props, railsContext, domNodeId) => {
-  const store = ReactOnRails.getStore('applicationStore');
-  const history = browserHistory;
-
-  match({ history, routes }, (error, redirectionLocation, renderProps) => {
-    if (error) {
-      throw error;
-    }
-
-    const reactElement = (
-      <Provider store={store}>
-        <Router {...renderProps} />
-      </Provider>
-    );
-
-    ReactDOM.render(reactElement, document.getElementById(domNodeId));
-  });
-};
-
-export default RouterAppRenderer;
-```
-
-What's going on in this example is that we're putting the rendering code in the callback passed to `match`. The effect is that the client render doesn't happen until the code chunk gets fetched from the server, preventing the client/server checksum mismatch.
-
-The idea is that `match` from React Router is async; it fetches the component using the `getComponent` method that you provide with the route definition, and then passes the props needed for the complete render to the callback. Then we do the first render inside the callback, so that the first render is the same as the server render.
-
-The server render matches the deferred render because the server bundle is a single file, and so it doesn't need to wait for anything to be fetched.
-
-### Working Example
-
-There's an implemented example of code splitting in the `spec/dummy` folder of this repository.
-
-See:
-
-- [spec/dummy/client/app/packs/client-bundle.js](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/packs/client-bundle.js)
-- [spec/dummy/client/app/packs/server-bundle.js](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/packs/server-bundle.js)
-
-_Note: The DeferredRender example components referenced in older versions of this document have been removed as this code splitting approach is outdated._
-
-### Comparison of Server vs. Client Code
-
-![image](https://user-images.githubusercontent.com/1118459/42479546-2296f794-8375-11e8-85ff-52629fcaf657.png)
-
-### Caveats
-
-If you're going to try to do code splitting with server-rendered routes, you'll probably need to use separate route definitions for client and server to prevent code splitting from happening for the server bundle. The server bundle should be one file containing all the JavaScript code. This will require you to have separate Webpack configurations for client and server.
-
-The reason is we do server rendering with ExecJS, which is not capable of doing anything asynchronous. It would be impossible to asynchronously fetch a code chunk while server rendering. See [this issue](https://github.com/shakacode/react_on_rails/issues/477) for a discussion.
-
-Also, do not attempt to register a renderer function on the server. Instead, register either a Render-Function or a component. If you register a renderer in the server bundle, you'll get an error when React on Rails tries to server render the component.
-
-## How does Webpack know where to find my code chunks?
-
-Add the following to the output key of your Webpack config:
-
-```js
-config = {
-  output: {
-    publicPath: '/assets/',
-  },
-};
-```
-
-This causes Webpack to prepend the code chunk filename with `/assets/` in the request url. The React on Rails sets up the Webpack config to put Webpack bundles in `app/assets/javascripts/webpack`, and modifies `config/initializers/assets.rb` so that rails detects the bundles. This means that when we prepend the request URL with `/assets/`, rails will know what Webpack is asking for.
-
-See [our Rails assets documentation](../outdated/rails-assets.md) to learn more about static assets.
-
-If you forget to set the public path, Webpack will request the code chunk at `/{filename}`. This will cause the request to be handled by the Rails router, which will send back a 404 response, assuming that you don't have a catch-all route. In your JavaScript console, you'll get the following error:
-
-> GET http://localhost:3000/1.1-bundle.js
-
-You'll also see the following in your Rails development log:
-
-> Started GET "/1.1-bundle.js" for 127.0.0.1 at 2016-11-29 15:21:55 -0800
->
-> ActionController::RoutingError (No route matches [GET] "/1.1-bundle.js")
-
-It's worth mentioning that in Webpack v2, it's possible to register an error handler by calling `catch` on the promise returned by `System.import`, so if you want to do error handling, you should use v2. The [example](#working-example) in `spec/dummy` is currently using Webpack v1.
diff --git a/docs/building-features/foreman-issues.md b/docs/building-features/foreman-issues.md
deleted file mode 100644
index 464583088f..0000000000
--- a/docs/building-features/foreman-issues.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Foreman Issues
-
-## It is not recommended to include foreman into Gemfile
-
-See: https://github.com/ddollar/foreman
-
-> Ruby users should take care not to install foreman in their project's Gemfile.
-
-## Known issues
-
-- With `foreman 0.82.0`, the NPM package `react-s3-uploader` was failing to finish uploading a file to S3 when the server was started by `foreman -f Procfile.dev`.
-  At the same time, the same code works fine when the Ruby server is started by `bundle exec rails s`.
-
-- The same Procfile with different versions of `foreman` in combination with different versions of `bundler` may produce different output of `ps aux`.
-  This may break Bash tools which rely on `ps` output.
diff --git a/docs/building-features/hmr-and-hot-reloading-with-the-webpack-dev-server.md b/docs/building-features/hmr-and-hot-reloading-with-the-webpack-dev-server.md
index ebf58e2d24..6b00a01f88 100644
--- a/docs/building-features/hmr-and-hot-reloading-with-the-webpack-dev-server.md
+++ b/docs/building-features/hmr-and-hot-reloading-with-the-webpack-dev-server.md
@@ -14,13 +14,13 @@ If you are **_not_** using server-side rendering (**_not_** using `prerender: tr
 then you can follow all the regular docs for using the `bin/shakapacker-dev-server`
 during development.
 
-# Server Side Rendering with the Default shakacode/shakapacker bin/shakapacker-dev-server
+## Server Side Rendering with the Default shakacode/shakapacker bin/shakapacker-dev-server
 
 If you are using server-side rendering, then you have a couple of options. The
 recommended technique is to have a different Webpack configuration for server
 rendering.
 
-## If you use the same Webpack setup for your server and client bundles
+### If you use the same Webpack setup for your server and client bundles
 
 If you do use the `webpack-dev-server` for prerendering, be sure to set the
 `config/initializers/react_on_rails.rb` setting of
@@ -40,9 +40,9 @@ If you don't configure these two to false, you'll see errors like:
 - `ReferenceError: window is not defined` (if `hmr` is true)
 - `TypeError: Cannot read property 'prototype' of undefined` (if `inline` is true)
 
-# Client-Side rendering with HMR using react-refresh-webpack-plugin
+## Client-Side rendering with HMR using react-refresh-webpack-plugin
 
-## Basic installation
+### Basic installation
 
 To enable the HMR functionality, you have to use `./bin/shakapacker-dev-server`
 
diff --git a/docs/building-features/how-to-conditionally-server-render-based-on-device-type.md b/docs/building-features/how-to-conditionally-server-render-based-on-device-type.md
index a376f4047a..e8bc414ffc 100644
--- a/docs/building-features/how-to-conditionally-server-render-based-on-device-type.md
+++ b/docs/building-features/how-to-conditionally-server-render-based-on-device-type.md
@@ -27,7 +27,7 @@ end
 
 # Shown below are the defaults for configuration
 ReactOnRails.configure do |config|
-  # See https://github.com/shakacode/react_on_rails/blob/master/docs/guides/configuration.md for the rest
+  # See https://github.com/shakacode/react_on_rails/blob/master/docs/api-reference/configuration.md for the rest
 
   # This allows you to add additional values to the Rails Context. Implement one static method
   # called `custom_context(view_context)` and return a Hash.
@@ -35,6 +35,6 @@ ReactOnRails.configure do |config|
 end
 ```
 
-Note, full details of the React on Rails configuration are [here in docs/basics/configuration.md](https://shakacode.com/react-on-rails/docs/guides/configuration/).
+Note, full details of the React on Rails configuration are [available here](https://shakacode.com/react-on-rails/docs/api-reference/configuration/).
 
 See the doc file [render-functions-and-railscontext.md](../core-concepts/render-functions-and-railscontext.md#rails-context) for how your client-side code uses the device information
diff --git a/docs/building-features/i18n.md b/docs/building-features/i18n.md
index d4acaa6f43..5e5d06610e 100644
--- a/docs/building-features/i18n.md
+++ b/docs/building-features/i18n.md
@@ -92,7 +92,7 @@ By default, the locales are generated as JSON, but you can also generate them as
    )
    ```
 
-# Notes
+## Notes
 
 - See why using JSON can perform better compared to JS for large amounts of data [https://v8.dev/blog/cost-of-javascript-2019#json](https://v8.dev/blog/cost-of-javascript-2019#json).
 - See [Support for Rails' i18n pluralization #1000](https://github.com/shakacode/react_on_rails/issues/1000) for a discussion of issues around pluralization.
diff --git a/docs/building-features/images.md b/docs/building-features/images.md
index 15dd293eb4..666664fc00 100644
--- a/docs/building-features/images.md
+++ b/docs/building-features/images.md
@@ -1,4 +1,4 @@
-# Images
+# Configuring Images and Assets with Webpack
 
 1. leading slash necessary on the
    a. Option name for the file-loader and url-loader (todo reference)
diff --git a/docs/building-features/process-managers.md b/docs/building-features/process-managers.md
new file mode 100644
index 0000000000..6a32161fe7
--- /dev/null
+++ b/docs/building-features/process-managers.md
@@ -0,0 +1,91 @@
+# Using Process Managers with React on Rails
+
+React on Rails requires running multiple processes simultaneously during development:
+
+- Rails server
+- Webpack dev server (client bundle)
+- Webpack watcher (server bundle)
+
+## Running Your Development Server
+
+React on Rails includes `bin/dev` which automatically uses Overmind or Foreman:
+
+```bash
+./bin/dev
+```
+
+This script will:
+
+1. Try to use Overmind (if installed)
+2. Fall back to Foreman (if installed)
+3. Show installation instructions if neither is found
+
+## Installing a Process Manager
+
+### Overmind (Recommended)
+
+Overmind provides easier debugging and better signal handling:
+
+```bash
+# macOS
+brew install overmind
+
+# Linux
+# See: https://github.com/DarthSim/overmind#installation
+```
+
+### Foreman (Alternative)
+
+Foreman is a widely-used Ruby-based process manager:
+
+```bash
+# Install globally (NOT in Gemfile)
+gem install foreman
+```
+
+**Important:** Do NOT add Foreman to your `Gemfile`. Install it globally on your system.
+
+**Why not in Gemfile?**
+
+From [Foreman's documentation](https://github.com/ddollar/foreman/wiki/Don't-Bundle-Foreman):
+
+> Foreman is not a library, and should not affect the dependency tree of your application.
+
+Key reasons:
+
+- **Dependency conflicts**: Including Foreman in your Gemfile can create dependency conflicts that break other projects
+- **Security risk**: Loading Foreman as an application dependency creates an unnecessary security vulnerability vector
+- **Stability**: Foreman is mature and stable; bundling it could introduce bugs from unnecessary dependency updates
+- **Wrong abstraction**: Foreman is a system tool, not an application dependency
+
+Install Foreman globally: `gem install foreman`
+
+## Alternative: Run Process Managers Directly
+
+You can also run process managers directly instead of using `bin/dev`:
+
+```bash
+# With Overmind
+overmind start -f Procfile.dev
+
+# With Foreman
+foreman start -f Procfile.dev
+```
+
+## Customizing Your Setup
+
+Edit `Procfile.dev` in your project root to customize which processes run and their configuration.
+
+The default `Procfile.dev` includes:
+
+```procfile
+rails: bundle exec rails s -p 3000
+wp-client: bin/shakapacker-dev-server
+wp-server: SERVER_BUNDLE_ONLY=true bin/shakapacker --watch
+```
+
+## See Also
+
+- [HMR and Hot Reloading](./hmr-and-hot-reloading-with-the-webpack-dev-server.md)
+- [Foreman documentation](https://github.com/ddollar/foreman)
+- [Overmind documentation](https://github.com/DarthSim/overmind)
diff --git a/docs/building-features/react-and-redux.md b/docs/building-features/react-and-redux.md
index ed818cf3f9..f3303e9ac0 100644
--- a/docs/building-features/react-and-redux.md
+++ b/docs/building-features/react-and-redux.md
@@ -4,7 +4,7 @@
 
 See [Sharing State Between Components](https://react.dev/learn/sharing-state-between-components).
 
-# Redux Reducers
+## Redux Reducers
 
 The `helloWorld/reducers/index.jsx` example that results from running the generator with the Redux option may be slightly confusing because of its simplicity. For clarity, what follows is a more fleshed-out example of what a reducer might look like:
 
diff --git a/docs/building-features/react-router.md b/docs/building-features/react-router.md
index e908bbe713..d1fba52344 100644
--- a/docs/building-features/react-router.md
+++ b/docs/building-features/react-router.md
@@ -1,76 +1,183 @@
-_This article needs updating for the latest version of React Router_
-
 # Using React Router
 
-React on Rails supports the use of React Router. Client-side code doesn't need any special configuration for the React on Rails gem. Implement React Router how you normally would. Note, you might want to avoid using Turbolinks as both Turbolinks and React Router will be trying to handle the back and forward buttons. If you get this figured out, please do share with the community! Otherwise, you might have to tweak the basic settings for Turbolinks, and this may or may not be worth the effort.
+React on Rails supports React Router for client-side routing. This guide shows how to integrate React Router into your React on Rails application.
+
+**Important:** The React on Rails generator does not install React Router. You'll need to add it to your project manually.
+
+## Compatibility Note
+
+If you're using Turbo (Rails 7+) or Turbolinks (Rails 6 and earlier), be aware that both React Router and Turbo/Turbolinks handle browser navigation and the back button. These two routing systems can conflict. Consider:
+
+- Using one routing approach (either Turbo OR React Router, not both)
+- Disabling Turbo for pages using React Router with `data-turbo="false"`
+- Using code splitting instead of client-side routing for similar performance benefits
+
+If you successfully integrate both, please share your solution with the community!
+
+For more details, see [Turbo/Turbolinks Guide](./turbolinks.md).
+
+## Installation
+
+First, add React Router v6 to your project:
+
+```bash
+npm install react-router-dom@^6.0.0
+# or
+yarn add react-router-dom@^6.0.0
+```
+
+**Why React Router v6?** React Router v7 has merged with Remix and uses a different architecture that may not be fully compatible with React on Rails' server-side rendering approach. We recommend v6 for stable integration. If you need v7 features, please test thoroughly and share your findings with the community.
 
-If you are working with the HelloWorldApp created by the react_on_rails generator, then the code below corresponds to the module in `client/app/bundles/HelloWorld/startup/HelloWorldApp.jsx`.
+React Router v6 offers multiple routing approaches. For React on Rails, we recommend **Declarative Mode** (traditional component-based routing, covered in this guide).
 
-```js
-import { BrowserRouter, Switch } from 'react-router-dom';
-import routes from './routes.jsx';
+**Note on Data Mode:** React Router's Data Mode (with loaders/actions) is designed for SPAs where the client handles data fetching. Since React on Rails uses Rails controllers to load data and pass it as props to React components, Data Mode would create duplicate data loading. Stick with Declarative Mode to leverage React on Rails' server-side data loading pattern.
 
-const RouterApp = (props, railsContext) => {
-  // create your hydrated store
-  const store = createStore(props);
+## Basic Client-Side Setup with Redux
+
+If you're using Redux (created with `rails generate react_on_rails:install --redux`), you can add React Router by wrapping your app:
+
+**File: `app/javascript/src/HelloWorldApp/ror_components/HelloWorldApp.client.jsx`**
+
+```jsx
+import React from 'react';
+import { Provider } from 'react-redux';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+
+import configureStore from '../store/helloWorldStore';
+import HelloWorldContainer from '../containers/HelloWorldContainer';
+// Import other components for routing
+// import About from '../components/About';
+// import Contact from '../components/Contact';
+
+const HelloWorldApp = (props) => {
+  const store = configureStore(props);
 
   return (
     <Provider store={store}>
       <BrowserRouter>
-        <Switch>{routes}</Switch>
+        <Routes>
+          <Route path="/" element={<HelloWorldContainer />} />
+          {/* Add more routes here */}
+          {/* <Route path="/about" element={<About />} /> */}
+          {/* <Route path="/contact" element={<Contact />} /> */}
+        </Routes>
       </BrowserRouter>
     </Provider>
   );
 };
-```
 
-For a fleshed out integration of React on Rails with React Router, check out [React Webpack Rails Tutorial Code](https://github.com/shakacode/react-webpack-rails-tutorial), specifically the routing configuration in:
+export default HelloWorldApp;
+```
 
-- [react-webpack-rails-tutorial/client/app/bundles/comments/routes/routes.jsx](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/app/bundles/comments/routes/routes.jsx)
+**Key points:**
 
-# Server Rendering Using React Router V4
+- `<Provider>` wraps `<BrowserRouter>` so all routes have Redux access
+- Use `<Routes>` and `<Route>` (not `<Switch>` from React Router v5)
+- Use `element` prop to specify components (not `component` or `render` props from v5)
+- Routes are automatically matched by best fit, not render order
 
-Your Render-Function may not return an object with the property `renderedHtml`. Thus, you call
-`renderToString()` and return an object with this property.
+## Server-Side Rendering with React Router
 
-This example **only applies to server-side rendering** and should only be used in the server-side bundle.
+For server rendering, use `StaticRouter` instead of `BrowserRouter`.
 
-From the [original example in the React Router docs](https://github.com/ReactTraining/react-router/blob/v4.3.1/packages/react-router-dom/docs/guides/server-rendering.md)
+**File: `app/javascript/src/HelloWorldApp/ror_components/HelloWorldApp.server.jsx`**
 
-```javascript
+```jsx
 import React from 'react';
 import { renderToString } from 'react-dom/server';
-import { StaticRouter } from 'react-router';
+import { StaticRouter } from 'react-router-dom/server';
 import { Provider } from 'react-redux';
-import ReactOnRails from 'react-on-rails';
-
-// App.jsx from src/client/App.jsx
-import App from '../App';
-
-const ReactServerRenderer = (props, railsContext) => {
-  const context = {};
-
-  // commentStore from src/server/store/commentStore
-  const store = ReactOnRails.getStore('../store/commentStore');
+import { Routes, Route } from 'react-router-dom';
 
-  // Route Store generated from react-on-rails
+import configureStore from '../store/helloWorldStore';
+import HelloWorldContainer from '../containers/HelloWorldContainer';
+// Import other components for routing
+// import About from '../components/About';
+// import Contact from '../components/Contact';
 
+const HelloWorldApp = (props, railsContext) => {
+  const store = configureStore(props);
   const { location } = railsContext;
 
   const html = renderToString(
     <Provider store={store}>
-      <StaticRouter location={location} context={context} props={props}>
-        <App />
+      <StaticRouter location={location}>
+        <Routes>
+          <Route path="/" element={<HelloWorldContainer />} />
+          {/* Add more routes here */}
+          {/* <Route path="/about" element={<About />} /> */}
+          {/* <Route path="/contact" element={<Contact />} /> */}
+        </Routes>
       </StaticRouter>
     </Provider>,
   );
 
-  if (context.url) {
-    // Somewhere a `<Redirect>` was rendered
-    redirect(301, context.url);
-  } else {
-    // we're good, send the response
-    return { renderedHtml: html };
-  }
+  return { renderedHtml: html };
 };
+
+export default HelloWorldApp;
+```
+
+**Important changes from React Router v5:**
+
+- Import `StaticRouter` from `'react-router-dom/server'` (not `'react-router'`)
+- Use `<Routes>` and `<Route>` with `element` prop
+- `location` prop takes a string path from `railsContext`
+- No need for `match()` or `RouterContext` - simplified API
+
+## Rails Routes Configuration
+
+**Critical Step:** To support direct URL visits, browser refresh, and server-side rendering, you must configure Rails to handle all React Router paths.
+
+Add a wildcard route in your `config/routes.rb`:
+
+```ruby
+# config/routes.rb
+Rails.application.routes.draw do
+  # Your main route
+  get 'your_path', to: 'your_controller#index'
+
+  # Wildcard catch-all for React Router sub-routes
+  get 'your_path/*path', to: 'your_controller#index'
+end
+```
+
+**Example:**
+
+```ruby
+# For a HelloWorld app with React Router
+get 'hello_world', to: 'hello_world#index'
+get 'hello_world/*path', to: 'hello_world#index'
 ```
+
+This configuration ensures:
+
+- `/hello_world` → Renders your React app
+- `/hello_world/about` → Rails serves the same view, React Router handles routing
+- `/hello_world/contact` → Rails serves the same view, React Router handles routing
+- Browser refresh works on any route
+- Direct URL visits work with server-side rendering
+
+**Important:** Your React Router paths should match your Rails route structure. If Rails serves your app at `/hello_world`, your React Router routes should start with `/hello_world`:
+
+```jsx
+<Routes>
+  <Route path="/hello_world" element={<Home />} />
+  <Route path="/hello_world/about" element={<About />} />
+  <Route path="/hello_world/contact" element={<Contact />} />
+</Routes>
+```
+
+## Example Application
+
+For a complete example of React on Rails with React Router, see the [React Webpack Rails Tutorial](https://github.com/shakacode/react-webpack-rails-tutorial).
+
+For a practical example of route organization, see the [routes configuration file](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/app/bundles/comments/routes/routes.jsx) from the tutorial.
+
+**Note:** This tutorial uses a legacy directory structure (`client/app/bundles`) from earlier React on Rails versions. Modern projects use `app/javascript/src/` structure as shown in this guide. The React Router integration patterns remain applicable.
+
+## Additional Resources
+
+- [React Router Official Documentation](https://reactrouter.com/)
+- [React Router v6 Migration Guide](https://reactrouter.com/docs/en/v6/upgrading/v5) - If upgrading from v5
+- [React on Rails Turbo/Turbolinks Guide](./turbolinks.md)
diff --git a/docs/building-features/rspec-configuration.md b/docs/building-features/rspec-configuration.md
index dd5eed763d..65e27869df 100644
--- a/docs/building-features/rspec-configuration.md
+++ b/docs/building-features/rspec-configuration.md
@@ -2,7 +2,7 @@
 
 _Click [here for minitest](../building-features/minitest-configuration.md)_
 
-# If your Webpack configurations correspond to Shakapacker's default setup
+## If your Webpack configurations correspond to Shakapacker's default setup
 
 If you're able to configure your Webpack configuration to be run by having your Webpack configuration
 returned by the files in `/config/webpack`, then you have 2 options to ensure that your files are
@@ -20,7 +20,7 @@ config.build_test_command = "NODE_ENV=test RAILS_ENV=test bin/shakapacker"
 Which should you use? If you're already using the `Shakapacker` way to configure Webpack, then
 you can keep things simple and use the `Shakapacker` options.
 
-# Checking for stale assets using React on Rails
+## Checking for stale assets using React on Rails
 
 Because you will probably want to run RSpec tests that rely on compiled Webpack assets (typically, your integration/feature specs where `js: true`), you will want to ensure you don't accidentally run tests on missing or stale Webpack assets. If you did use stale Webpack assets, you will get invalid test results as your tests do not use the very latest JavaScript code.
 
diff --git a/docs/building-features/turbolinks.md b/docs/building-features/turbolinks.md
index 9ec4e440a3..c7d950ddc1 100644
--- a/docs/building-features/turbolinks.md
+++ b/docs/building-features/turbolinks.md
@@ -6,45 +6,124 @@
 - See [PR 1374](https://github.com/shakacode/react_on_rails/pull/1374).
 - Ability to use with [Turbo (`@hotwired/turbo`)](https://turbo.hotwired.dev/), as Turbolinks becomes obsolete.
 
-# Using Turbo
+## Using Turbo
 
-To configure Turbo the following option can be set:
-`ReactOnRails.setOptions({ turbo: true })`
+Turbo is the modern replacement for Turbolinks, providing fast navigation through your Rails app without full page reloads.
 
-Turbo is not auto-detected like older Turbolinks.
+### Basic Setup
 
-_TODO: Walk through code changes in PR 1620._
+**1. Install Turbo**
 
-# Legacy Turbolinks
+Add the Turbo Rails gem and JavaScript package:
 
-_The following docs may be outdated. We recommend updating to the latest Turbo or removing old Turbolinks._
+```bash
+# Gemfile
+gem "turbo-rails"
 
+# JavaScript
+yarn add @hotwired/turbo-rails
+```
+
+**2. Enable Turbo in React on Rails**
+
+Import Turbo and configure React on Rails to work with it:
+
+```js
+// app/javascript/packs/application.js
+import '@hotwired/turbo-rails';
+
+ReactOnRails.setOptions({
+  turbo: true, // Enable Turbo support (not auto-detected)
+});
+```
+
+**3. Use Turbo Frames** (works out of the box)
+
+Turbo Frames work with React components without any special configuration:
+
+```erb
+<%# app/views/items/index.html.erb %>
+<%= turbo_frame_tag 'item-list' do %>
+  <%= react_component("ItemList", props: @items) %>
+<% end %>
+
+<%# Clicking a link that responds with another turbo_frame_tag will update just that frame %>
+```
+
+### Turbo Streams (Requires React on Rails Pro)
+
+> **⚡️ React on Rails Pro Feature**
+>
+> Turbo Streams require the `immediate_hydration: true` option, which is a [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/) licensed feature.
+
+**Why Turbo Streams Need Special Handling:**
+
+Unlike Turbo Frames, Turbo Streams don't dispatch the normal `turbo:render` events that React on Rails uses to hydrate components. Instead, they directly manipulate the DOM. The `immediate_hydration` option tells React on Rails to hydrate the component immediately when it's inserted into the DOM, without waiting for page load events.
+
+**Example: Create a Turbo Stream Response**
+
+```erb
+<%# app/views/items/index.html.erb - Initial page with frame %>
+<%= turbo_frame_tag 'item-list' do %>
+  <%= button_to "Load Items", items_path, method: :post %>
+<% end %>
+```
+
+```erb
+<%# app/views/items/create.turbo_stream.erb - Turbo Stream response %>
+<%= turbo_stream.update 'item-list' do %>
+  <%= react_component("ItemList",
+                      props: @items,
+                      immediate_hydration: true) %>
+<% end %>
+```
+
+**What Happens:**
+
+1. User clicks "Load Items" button
+2. Rails responds with `create.turbo_stream.erb`
+3. Turbo Stream updates the `item-list` frame with the new React component
+4. `immediate_hydration: true` ensures the component hydrates immediately
+
+**Learn More:**
+
+- See [v16.0 Release Notes](../upgrading/release-notes/16.0.0.md#enhanced-script-loading-strategies) for full `immediate_hydration` documentation
+- See [Streaming Server Rendering](./streaming-server-rendering.md) for another Pro use case
+- Working example in codebase: `spec/dummy/app/views/pages/turbo_stream_send_hello_world.turbo_stream.erb`
+- Contact [justin@shakacode.com](mailto:justin@shakacode.com) for React on Rails Pro licensing
+
+**Migration Note:** If you're referencing [PR #1620](https://github.com/shakacode/react_on_rails/pull/1620) discussions, note that `force_load` was renamed to `immediate_hydration` in v16.0.
+
+## Legacy Turbolinks Support
+
+_The following documentation covers older Turbolinks versions (2.x and 5.x). While still supported by React on Rails, we recommend migrating to Turbo when possible._
+
+React on Rails currently supports:
+
+- **Turbolinks 5.x** (e.g., 5.0.0+) - Auto-detected
+- **Turbolinks 2.x** (Classic) - Auto-detected
 - See [Turbolinks on Github](https://github.com/rails/turbolinks)
-- React on Rails currently supports 2.5.x of Turbolinks and 5.0.0 of Turbolinks 5.
-- You may include Turbolinks either via yarn (recommended) or via the gem.
 
-## Why Turbolinks?
+You may include Turbolinks either via yarn (recommended) or via the gem.
+
+### Why Turbolinks?
 
 As you switch between Rails HTML controller requests, you will only load the HTML and you will not reload JavaScript and stylesheets.
 This definitely can make an app perform better, even if the JavaScript and stylesheets are cached by the browser, as they will still require parsing.
 
-## Requirements for Using Turbolinks
+### Requirements for Using Turbolinks
 
 1. Either **avoid using [React Router](https://reactrouter.com/)** or be prepared to deal with any conflicts between it and Turbolinks.
 2. **Use one JS and one CSS file** throughout your app. Otherwise, you will have to figure out how best to handle multiple JS and CSS files throughout the app given Turbolinks.
 
-## Why Not Turbolinks
+### Why Not Turbolinks
 
 1. [React Router](https://reactrouter.com/) handles the back and forward buttons, as does Turbolinks. You _might_ be able to make this work. _Please share your findings._
 1. You want to do code splitting to minimize the JavaScript loaded.
 
-## More Information
+### Installation
 
-- CSRF tokens need thorough checking with Turbolinks5. Turbolinks5 changes the head element by JavaScript (not only body) on page changes with the correct csrf meta tag. But if the JS code parsed this from head when several windows were opened, then our specs didn't all pass. I didn't examine the details, it may be caused by app code, not library code. Anyway, it may need additional checking because there is a CSRF helper in ReactOnRails and it needs to work with Turbolinks5.
-- Turbolinks5 sends requests without the `Accept: */*` in the header, only exactly like `Accept: text/html` which makes Rails behave a bit specifically compared to normal and mime-parsing, which is skipped when Rails sees `*/*`. For more details on the special handling of `*/*` you can read [Mime Type Resolution in Rails](http://blog.bigbinary.com/2010/11/23/mime-type-resolution-in-rails.html).
-- If you're using multiple Webpack bundles, make sure that there are no name conflicts between JS objects or Redux store paths.
-
-### Install Checklist
+#### Install Checklist
 
 1. Include turbolinks via yarn as shown in the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/blob/8a6c8aa2e3b7ae5b08b0a9744fb3a63a2fe0f002/client/webpack.client.base.config.js#L22) or include the gem "turbolinks".
 1. Included the proper "track" tags when you include the javascript and stylesheet:
@@ -61,13 +140,7 @@ NOTE: for Turbolinks 2.x, use `'data-turbolinks-track' => true`
    //= require turbolinks
    ```
 
-## Turbolinks 5
-
-Turbolinks 5 is now supported. React on Rails will automatically detect which version of Turbolinks you are using and use the correct event handlers.
-
-For more information on Turbolinks 5: [https://github.com/turbolinks/turbolinks](https://github.com/turbolinks/turbolinks)
-
-## Turbolinks from NPM
+#### Turbolinks from NPM
 
 See the [instructions on installing from NPM](https://github.com/turbolinks/turbolinks#installation-using-npm).
 
@@ -76,7 +149,7 @@ import Turbolinks from 'turbolinks';
 Turbolinks.start();
 ```
 
-### Async script loading
+##### Async script loading
 
 Async script loading can be done like this (starting with Shakapacker 8.2):
 
@@ -102,10 +175,33 @@ document.addEventListener('turbolinks:load', function () {
 
 React on Rails 15 fixes both issues, so if you still have the listener it can be removed (and should be as `reactOnRailsPageLoaded()` is now async).
 
-> [!WARNING]
-> Do not use `immediate_hydration: false` (React on Rails Pro licensed feature) with Turbolinks if you have async scripts.
+> [!WARNING] > **Async Scripts with Turbolinks Require Pro Feature**
+>
+> If you use async script loading with Turbolinks, you must enable `immediate_hydration: true` to prevent race conditions. This is a React on Rails Pro feature.
+>
+> Without `immediate_hydration: true`, async scripts may not be ready when Turbolinks fires navigation events, causing components to fail hydration.
+>
+> **Alternatives:**
+>
+> - Use `defer` instead of `async` (waits for full page load before hydration)
+> - Upgrade to modern Turbo (recommended)
+> - Use React on Rails Pro for `immediate_hydration: true`
+
+### Turbolinks 5 Specific Information
+
+React on Rails will automatically detect which version of Turbolinks you are using (2.x or 5.x) and use the correct event handlers.
+
+For more information on Turbolinks 5: [https://github.com/turbolinks/turbolinks](https://github.com/turbolinks/turbolinks)
+
+### Technical Details and Troubleshooting
+
+#### CSRF and MIME Type Handling
+
+- **CSRF tokens**: Turbolinks 5 changes the head element by JavaScript (not only body) on page changes with the correct csrf meta tag. Be thorough checking CSRF tokens, especially when multiple windows are opened, as the CSRF helper in ReactOnRails needs to work with Turbolinks5.
+- **MIME type handling**: Turbolinks 5 sends requests with `Accept: text/html` only (not `Accept: */*`), which makes Rails behave differently compared to normal requests. For more details on the special handling of `*/*` you can read [Mime Type Resolution in Rails](http://blog.bigbinary.com/2010/11/23/mime-type-resolution-in-rails.html).
+- **Multiple Webpack bundles**: If you're using multiple Webpack bundles, make sure that there are no name conflicts between JS objects or Redux store paths.
 
-## Troubleshooting
+#### Debugging Turbolinks Events
 
 To turn on tracing of Turbolinks events, put this in your registration file, where you register your components.
 
diff --git a/docs/core-concepts/client-vs-server-rendering.md b/docs/core-concepts/client-vs-server-rendering.md
index 1060944b96..2cc89ec353 100644
--- a/docs/core-concepts/client-vs-server-rendering.md
+++ b/docs/core-concepts/client-vs-server-rendering.md
@@ -18,7 +18,7 @@ If you open the HTML source of any web page using React on Rails, you'll see the
 
 **Note**: If server rendering is not used (prerender: false), then the major difference is that the HTML rendered for the React component only contains the outer div: `<div id="HelloWorld-react-component-0"/>`. The first specification of the React component is just the same.
 
-# Different Server-Side Rendering Code (and a Server-Specific Bundle)
+## Different Server-Side Rendering Code (and a Server-Specific Bundle)
 
 You may want different code for your server-rendered components running server-side versus client-side. For example, if you have an animation that runs when a component is displayed, you might need to turn that off when server rendering. One way to handle this is conditional code like `if (window) { doClientOnlyCode() }`.
 
diff --git a/docs/core-concepts/react-on-rails-overview.md b/docs/core-concepts/react-on-rails-overview.md
deleted file mode 100644
index 7abe7ac698..0000000000
--- a/docs/core-concepts/react-on-rails-overview.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# React on Rails
-
-React on Rails integrates Rails with (server rendering of) Facebook's [React](https://github.com/facebook/react) front-end framework.
-
----
-
-# Project Objective
-
-To provide a high performance framework for integrating Ruby on Rails with React via the [**Shakapacker**](https://github.com/shakacode/shakapacker) gem especially in regards to React Server-Side Rendering for better SEO and improved performance.
-
-# Features and Why React on Rails?
-
-1. Easy passing of props directly from your Rails view to your React components rather than having your Rails view load and then make a separate request to your API.
-1. Tight integration with [shakacode/shakapacker](https://github.com/shakacode/shakapacker).
-1. Server-Side Rendering (SSR), often used for SEO crawler indexing and UX performance, is not offered by `shakacode/shakapacker`.
-1. Support for HMR for a great developer experience.
-1. Supports latest versions of React with hooks.
-1. [Redux](https://redux.js.org/) and [React Router](https://reactrouter.com/) integration including server-side-rendering.
-1. [Internationalization (I18n) and (localization)](../building-features/i18n.md)
-1. A supportive community. This [web search shows how live public sites are using React on Rails](https://publicwww.com/websites/%22react-on-rails%22++-undeveloped.com+depth%3Aall/).
-1. [ReScript (Reason ML) Support](https://github.com/shakacode/reason-react-on-rails-example).
-
-See the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) for an example of a live implementation and code.
-
----
-
-## Prerequisites
-
-- Ruby on Rails >=5
-- Shakapacker 6.5.1+.
diff --git a/docs/core-concepts/webpack-configuration.md b/docs/core-concepts/webpack-configuration.md
index 4a85d5a2d0..b3057de6af 100644
--- a/docs/core-concepts/webpack-configuration.md
+++ b/docs/core-concepts/webpack-configuration.md
@@ -22,7 +22,7 @@ A key decision in your use React on Rails is whether you go with the Shakapacker
 
 ## Option 1: Default Generator Setup: Shakapacker app/javascript
 
-Typical Shakapacker apps have a standard directory structure as documented [here](https://github.com/shakacode/shakapacker/blob/master/README.md#configuration-and-code). If you follow [the basic tutorial](../getting-started/tutorial.md), you will see this pattern in action. In order to customize the Webpack configuration, consult [Webpack Tips](../outdated/webpack.md).
+Typical Shakapacker apps have a standard directory structure as documented [here](https://github.com/shakacode/shakapacker/blob/master/README.md#configuration-and-code). If you follow [the basic tutorial](../getting-started/tutorial.md), you will see this pattern in action. In order to customize the Webpack configuration, consult the [Shakapacker webpack customization docs](https://github.com/shakacode/shakapacker#webpack-configuration).
 
 The _advantage_ of using Shakapacker to configure Webpack is that there is very little code needed to get started, and you don't need to understand really anything about Webpack customization.
 
diff --git a/docs/deployment/heroku-deployment.md b/docs/deployment/heroku-deployment.md
index 5a3266a326..7f12a8a295 100644
--- a/docs/deployment/heroku-deployment.md
+++ b/docs/deployment/heroku-deployment.md
@@ -1,10 +1,26 @@
 # Heroku Deployment
 
+> **Note:** This guide is based on the working tutorial app at [reactrails.com](https://reactrails.com). While the instructions work, some versions referenced are older. For current Heroku best practices with Rails 7, see [Heroku's Rails 7 Guide](https://devcenter.heroku.com/articles/getting-started-with-rails7).
+
+## Create Your Heroku App
+
+_Assuming you can log in to heroku.com and have logged into your shell for Heroku._
+
+1. Visit [https://dashboard.heroku.com/new](https://dashboard.heroku.com/new) and create an app, say named `my-name-react-on-rails`:
+
+![06](https://cloud.githubusercontent.com/assets/20628911/17465014/1f29bf3c-5cf4-11e6-869f-4215987ae854.png)
+
+Run this command that looks like this from your new Heroku app
+
+```bash
+heroku git:remote -a my-name-react-on-rails
+```
+
 ## Heroku buildpacks
 
 React on Rails requires both a ruby environment (for Rails) and a Node environment (for Webpack), so you will need to have Heroku use multiple buildpacks.
 
-Assuming you have downloaded and installed the Heroku command-line utility and have initialized the app, you will need to tell Heroku to use both buildpacks via the command-line:
+Set heroku to use multiple buildpacks:
 
 ```bash
 heroku buildpacks:set heroku/ruby
@@ -13,6 +29,129 @@ heroku buildpacks:add --index 1 heroku/nodejs
 
 For more information, see [Using Multiple Buildpacks for an App](https://devcenter.heroku.com/articles/using-multiple-buildpacks-for-an-app)
 
+## Swap out sqlite for postgres
+
+Heroku requires your app to use Postgresql. If you have not set up your app
+with Postgresql, you need to change your app settings to use this database.
+
+Run the following command (in Rails 6+):
+
+```bash
+rails db:system:change --to=postgresql
+```
+
+If for any reason you want to do this process manually, run these two commands:
+
+```bash
+bundle remove sqlite3
+bundle add pg
+```
+
+![07](https://cloud.githubusercontent.com/assets/20628911/17465015/1f2f4042-5cf4-11e6-8287-2fb077550809.png)
+
+Now replace your `database.yml` file with this (assuming your app name is "ror").
+
+```yml
+default: &default
+  adapter: postgresql
+  username:
+  password:
+  host: localhost
+
+development:
+  <<: *default
+  database: ror_development
+
+# Warning: The database defined as "test" will be erased and
+# re-generated from your development database when you run "rake".
+# Do not set this db to the same as development or production.
+test:
+  <<: *default
+  database: ror_test
+
+production:
+  <<: *default
+  database: ror_production
+```
+
+Then you need to set up Postgres so you can run locally:
+
+```bash
+rake db:setup
+rake db:migrate
+```
+
+![08](https://cloud.githubusercontent.com/assets/20628911/17465016/1f3559f0-5cf4-11e6-8ab4-c5572e4644a5.png)
+
+Optionally you can add this line to your `routes.rb`. That way, your root page will go to the Hello World page for React On Rails.
+
+```ruby
+root "hello_world#index"
+```
+
+![09](https://cloud.githubusercontent.com/assets/20628911/17465018/1f3b685e-5cf4-11e6-93f8-105fc48517d0.png)
+
+## Configure Puma
+
+Next, configure your app for Puma, per the [instructions on Heroku](https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server).
+
+Create `./Procfile` with the following content. This is what Heroku uses to start your app.
+
+```procfile
+web: bundle exec puma -C config/puma.rb
+```
+
+Note, newer versions of Rails create this file automatically. However, the [docs on Heroku](https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server#config) have something a bit different, so please make it conform to those docs. As of 2020-06-04, the docs looked like this:
+
+`config/puma.rb`
+
+```rb
+workers Integer(ENV['WEB_CONCURRENCY'] || 2)
+threads_count = Integer(ENV['RAILS_MAX_THREADS'] || 5)
+threads threads_count, threads_count
+
+preload_app!
+
+rackup      DefaultRackup
+port        ENV['PORT']     || 3000
+environment ENV['RACK_ENV'] || 'development'
+
+on_worker_boot do
+  # Worker specific setup for Rails 4.1+
+  # See: https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server#on-worker-boot
+  ActiveRecord::Base.establish_connection
+end
+```
+
+## Specify Node and Yarn versions
+
+Next, update your `package.json` to specify the version of yarn and node. Add this section:
+
+```json
+  "engines": {
+    "node": "20.0.0",
+    "yarn": "1.22.4"
+  },
+```
+
+## Deploy
+
+Then after all changes are done don't forget to commit them with git and finally, you can push your app to Heroku!
+
+```bash
+git add -A
+git commit -m "Changes for Heroku"
+git push heroku master
+```
+
+Then run:
+
+```bash
+heroku open
+```
+
+and you will see your live app and you can share this URL with your friends. Congrats!
+
 ## assets:precompile
 
 ### Shakapacker Webpack configuration
diff --git a/docs/deployment/troubleshooting-build-errors.md b/docs/deployment/troubleshooting-build-errors.md
index f35ae6db0d..78c8eb849a 100644
--- a/docs/deployment/troubleshooting-build-errors.md
+++ b/docs/deployment/troubleshooting-build-errors.md
@@ -276,5 +276,5 @@ fi
 ## Need More Help?
 
 - Check the [general troubleshooting guide](../deployment/troubleshooting-when-using-shakapacker.md)
-- Review [webpack configuration docs](../outdated/webpack.md)
+- Review [webpack configuration guide](../core-concepts/webpack-configuration.md)
 - Contact [justin@shakacode.com](mailto:justin@shakacode.com) for professional support
diff --git a/docs/deployment/troubleshooting-when-using-shakapacker.md b/docs/deployment/troubleshooting-when-using-shakapacker.md
index 396611b255..46f1f59466 100644
--- a/docs/deployment/troubleshooting-when-using-shakapacker.md
+++ b/docs/deployment/troubleshooting-when-using-shakapacker.md
@@ -1,13 +1,15 @@
-# Client rendering crashes when configuring `optimization.runtimeChunk` to `multiple`
+# Troubleshooting Shakapacker Configuration Issues
 
-## Context
+## Client rendering crashes when configuring `optimization.runtimeChunk` to `multiple`
+
+### Context
 
 1. Ruby version: 3.1
 2. Rails version: 7.0.6
 3. Shakapacker version: 6.6.0
 4. React on Rails version: 13.3.5
 
-## The failure
+### The failure
 
 Configuring Webpack to embed the runtime in each chunk and calling `react_component` twice in a Rails view/partial causes the client render to crash with the following error:
 
@@ -27,9 +29,9 @@ VM4859 clientStartup.js:132 Uncaught Error: ReactOnRails encountered an error wh
     at HTMLDocument.onReadyStateChange (VM4859 clientStartup.js:238:13)
 ```
 
-## Configs
+### Configs
 
-### Webpack configuration
+#### Webpack configuration
 
 ```js
 optimization: {
@@ -37,7 +39,7 @@ optimization: {
 },
 ```
 
-### Rails view
+#### Rails view
 
 ```haml
 = react_component("XXX", props: @props)
@@ -45,13 +47,13 @@ optimization: {
 = react_component("YYY", props: @props)
 ```
 
-## The problem
+### The problem
 
 Configuring Webpack to embed the runtime in each chunk and calling `react_component` twice in a Rails view/partial causes the client render to crash.
 
 Read more at https://github.com/shakacode/react_on_rails/issues/1558.
 
-## Solution
+### Solution
 
 To overcome this issue, we could use [shakapacker](https://github.com/shakacode/shakapacker)'s default optimization configuration (pseudo-code):
 
diff --git a/docs/deployment/troubleshooting-when-using-webpacker.md b/docs/deployment/troubleshooting-when-using-webpacker.md
index b75c890e8e..de2076e825 100644
--- a/docs/deployment/troubleshooting-when-using-webpacker.md
+++ b/docs/deployment/troubleshooting-when-using-webpacker.md
@@ -1,3 +1,5 @@
+# Troubleshooting Webpacker Manifest Errors
+
 ## Context
 
 Rails: 5.0.2
diff --git a/docs/getting-started.md b/docs/getting-started.md
deleted file mode 100644
index 15c24c6c5f..0000000000
--- a/docs/getting-started.md
+++ /dev/null
@@ -1,253 +0,0 @@
-# Getting Started
-
-> **💡 Looking for the fastest way to get started?** Try our **[15-Minute Quick Start Guide](./getting-started/quick-start.md)** instead.
-
-## Choose Your Starting Point
-
-The best way to understand React on Rails depends on your situation:
-
-### 🚀 **New to React on Rails?**
-
-**→ [15-Minute Quick Start](./getting-started/quick-start.md)** - Get your first component working fast
-
-### 📱 **Have an existing Rails app?**
-
-**→ [Add to Existing App](./getting-started/installation-into-an-existing-rails-app.md)** - Integrate React on Rails
-
-### 📚 **Want comprehensive tutorial?**
-
-**→ [Complete Tutorial](./getting-started/tutorial.md)** - Step-by-step with Redux and routing
-
-### 👀 **Learn by example?**
-
-- **[Spec/Dummy](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy)** - Simple example in this repo
-- **[Live Demo](https://reactrails.com)** with **[source code](https://github.com/shakacode/react-webpack-rails-tutorial)**
-
----
-
-## System Requirements
-
-✅ **🚨 React on Rails 16.0+** (this guide covers modern features)
-✅ **🚨 Shakapacker 6+** (7+ recommended for React on Rails 16)
-✅ **Rails 7+** (Rails 5.2+ supported)
-✅ **Ruby 3.0+** (required)
-✅ **Node.js 18+**
-
-> **Don't have Shakapacker?** It's the modern replacement for Webpacker and required for React on Rails.
-
-## Basic Installation
-
-You need a Rails application with Shakapacker installed and configured on it. Check [Shakapacker documentation](https://github.com/shakacode/shakapacker) for more details but typically you need the following steps:
-
-```bash
-rails new PROJECT_NAME --skip-javascript
-cd PROJECT_NAME
-```
-
-## React on Rails Installation
-
-1. Add the `react_on_rails` gem to Gemfile:
-   Please use [the latest version](https://rubygems.org/gems/react_on_rails) to ensure you get all the security patches and the best support.
-
-   ```bash
-   bundle add react_on_rails --version=16.0.0 --strict
-   ```
-
-   Commit this to git (or else you cannot run the generator in the next step unless you pass the option `--ignore-warnings`).
-
-   ```bash
-   git add -A
-   git commit -m "Initial commit"
-   ```
-
-2. Run the install generator:
-
-   ```bash
-   bundle exec rails generate react_on_rails:install
-   ```
-
-Start the app:
-
-```bash
-bin/dev help
-bin/dev # start with hmr
-bin/dev static #
-```
-
-## Basic Usage
-
-### Configuration
-
-- Configure `config/initializers/react_on_rails.rb`. You can adjust some necessary settings and defaults. See file [docs/basics/configuration.md](./api-reference/configuration.md) for documentation of all configuration options.
-- Configure `config/shakapacker.yml`. If you used the generator and the default Shakapacker setup, you don't need to touch this file. If you are customizing your setup, then consult the [spec/dummy/config/shakapacker.yml](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/shakapacker.yml) example or the official default [shakapacker.yml](https://github.com/shakacode/shakapacker/blob/master/lib/install/config/shakapacker.yml).
-- Most apps should rely on the Shakapacker setup for Webpack. Shakapacker v6+ includes support for Webpack version 5.
-
-## Including your React Component on your Rails Views
-
-Once installation is complete, you can render a React component in any Rails view using the `react_component` helper method.
-
-```erb
-<%= react_component("HelloWorld", props: @some_props) %>
-```
-
-- **Server-Side Rendering**: Your React component is first rendered into HTML on the server. Use the **prerender** option:
-
-  ```erb
-  <%= react_component("HelloWorld", props: @some_props, prerender: true) %>
-  ```
-
-`@component_name` is a string and corresponds to the name you used to globally expose your React component.
-
-## Auto-Bundling (includes Auto-Registration)
-
-React on Rails supports **Auto-Bundling**, which automatically creates the webpack bundle _and_ registers your React components. This means you don’t have to manually configure packs or call `ReactOnRails.register(...)`.
-
----
-
-### Manual Registration (traditional way)
-
-```js
-// packs/hello-world-bundle.js
-import ReactOnRails from 'react-on-rails';
-import HelloWorld from '../components/HelloWorld';
-
-ReactOnRails.register({ HelloWorld });
-```
-
-```erb
-<%= react_component("HelloWorld", @hello_world_props) %>
-```
-
-Here you must both configure the pack entry (`hello-world-bundle.js`) and register the component.
-
----
-
-### Auto-Bundling (with Auto-Registration)
-
-```erb
-<%= react_component("HelloWorld", @hello_world_props, auto_load_bundle: true) %>
-<%= react_component("HeavyMarkdownEditor", @editor_props, auto_load_bundle: true) %>
-```
-
-With `auto_load_bundle: true`, and by placing your "exposed" components in the appropriate directories, React on Rails:
-
-- Automatically finds and bundles your component.
-- Automatically registers it for use.
-- Eliminates the need for manual pack configuration.
-
-See [Auto-Bundling: File-System-Based Automated Bundle Generation](./core-concepts/auto-bundling-file-system-based-automated-bundle-generation.md)
-
-Exposing your component in this way allows you to reference the component from a Rails view. You can expose as many components as you like, but their names must be unique. See below for the details of how you expose your components via the React on Rails Webpack configuration. You may call `ReactOnRails.register` many times.
-
-- `@some_props` can be either a hash or JSON string. This is an optional argument assuming you do not need to pass any options (if you want to pass options, such as `prerender: true`, but you do not want to pass any properties, simply pass an empty hash `{}`). **Props are automatically sanitized by React on Rails for security.** This will make the data available in your component:
-
-- This is what your HelloWorld.js file might contain. The railsContext is always available for any parameters that you _always_ want available for your React components. It has _nothing_ to do with the concept of the [React Context](https://react.dev/reference/react/useContext). See [Render-Functions and the RailsContext](./core-concepts/render-functions-and-railscontext.md) for more details on this topic.
-
-  ```js
-  import React from 'react';
-
-  export default (props, railsContext) => {
-    // Note wrap in a function to make this a React function component
-    return () => (
-      <div>
-        Your locale is {railsContext.i18nLocale}.<br />
-        Hello, {props.name}!
-      </div>
-    );
-  };
-  ```
-
-## What Happens Next?
-
-The generator set up the following:
-
-1. Component directory: `app/javascript/bundles/HelloWorld`
-2. Rails integration for rendering this component in a Rails view
-3. Webpack configuration for building your JavaScript bundle
-
-![Basic Hello World Example](./images/bundle-splitting-hello-world.png)
-
-#### Different Server-Side Rendering Code (and a Server-Specific Bundle)
-
-You may want different code for your server-rendered components running on the server side versus the client side. For example, if you have an animation that runs when a component is displayed, you might need to turn that off when server rendering. One way to handle this is conditional code like `if (typeof window !== 'undefined') { doClientOnlyCode() }`.
-
-Another way is to use a separate Webpack configuration file that can use a different server-side entry file, like 'serverRegistration.js' as opposed to 'clientRegistration.js.' That would set up different code for server rendering.
-
-For details on techniques to use different code for client and server rendering, see: [How to use different versions of a file for client and server rendering](https://forum.shakacode.com/t/how-to-use-different-versions-of-a-file-for-client-and-server-rendering/1352). (_Requires creating a free account._)
-
-## Specifying Your React Components
-
-You have two ways to specify your React components. You can either register the React component (either function or class component) directly, or you can create a function that returns a React component, which we using the name of a "render-function". Creating a render-function allows you to:
-
-1. Access to the `railsContext`. See the [documentation for the railsContext](./core-concepts/render-functions-and-railscontext.md) in terms of why you might need it. You **need** a Render-Function to access the `railsContext`.
-2. Use the passed-in props to initialize a redux store or set up `react-router`.
-3. Return different components depending on what's in the props.
-
-Note, the return value of a **Render-Function** should be either a React Function or Class Component or an object representing server rendering results.
-
-**Do not return a React Element (JSX).**
-
-ReactOnRails will automatically detect a registered Render-Function by the fact that the function takes
-more than 1 parameter. In other words, if you want the ability to provide a function that returns the
-React component, then you need to specify at least a second parameter. This is the `railsContext`.
-If you're not using this parameter, declare your function with the unused param:
-
-```js
-const MyComponentGenerator = (props, _railsContext) => {
-  if (props.print) {
-    // This is a React FunctionComponent because it is wrapped in a function.
-    return () => <H1>{JSON.stringify(props)}</H1>;
-  }
-};
-```
-
-Thus, there is no difference between registering a React Function Component or class Component versus a "Render-Function." Just call `ReactOnRails.register`.
-
-## react_component_hash for Render-Functions
-
-Another reason to use a Render-Function is that sometimes in server rendering, specifically with React Router, you need to return the result of calling ReactDOMServer.renderToString(element). You can do this by returning an object with the following shape: `{ renderedHtml, redirectLocation, error }`. Make sure you use this function with `react_component_hash`.
-
-For server rendering, if you wish to return multiple HTML strings from a Render-Function, you may return an Object from your Render-Function with a single top-level property of `renderedHtml`. Inside this Object, place a key called `componentHtml`, along with any other needed keys. An example scenario of this is when you are using side effects libraries like [React Helmet](https://github.com/nfl/react-helmet). Your Ruby code will get this Object as a Hash containing keys `componentHtml` and any other custom keys that you added:
-
-```js
-{
-  renderedHtml: {
-    componentHtml,
-    customKey1,
-    customKey2,
-  },
-}
-```
-
-For details on using react_component_hash with react-helmet, see [our react-helmet documentation](./building-features/react-helmet.md).
-
-## Error Handling
-
-- All errors from ReactOnRails will be of type ReactOnRails::Error.
-- Prerendering (server rendering) errors get context information for HoneyBadger and Sentry for easier debugging.
-
-## I18n
-
-React on Rails provides an option for automatic conversions of Rails `*.yml` locale files into `*.json` or `*.js`.
-See the [How to add I18n](./building-features/i18n.md) for a summary of adding I18n.
-
-## More Reading
-
-Depending on your goals, here's a progression of what to do next:
-
-1. **[View Helpers API](./api-reference/view-helpers-api.md)** - for more options of the `react_component` method.
-2. **[Tutorial](./getting-started/tutorial.md)** - Comprehensive walkthrough of features with a real app.
-3. **[Configuration](./api-reference/configuration.md)** - Details on every possible option you can configure.
-4. **[Migration Guide](./upgrading/upgrading-react-on-rails.md)** - Upgrade advice for each version.
-
----
-
-## Additional Resources
-
-### Rails/React Integration Options
-
-- **[Rails + Webpack Comparison](./building-features/rails-webpacker-react-integration-options.md)**
-
-### JavaScript/TypeScript Module System
-
-- See the official [Shakapacker documentation](https://github.com/shakacode/shakapacker) for more details regarding this topic.
diff --git a/docs/getting-started/installation-into-an-existing-rails-app.md b/docs/getting-started/installation-into-an-existing-rails-app.md
index ab0d881c22..1136b6e0aa 100644
--- a/docs/getting-started/installation-into-an-existing-rails-app.md
+++ b/docs/getting-started/installation-into-an-existing-rails-app.md
@@ -54,8 +54,6 @@
 
 ## Installation
 
-See the [Installation Overview](../advanced-topics/manual-installation-overview.md) for a concise set summary of what's in a React on Rails installation.
-
 ## NPM
 
 All JavaScript in React On Rails is loaded from npm: [react-on-rails](https://www.npmjs.com/package/react-on-rails). To manually install this (you did not use the generator), assuming you have a standard configuration, run this command (assuming you are in the directory where you have your `node_modules`):
diff --git a/docs/getting-started/project-structure.md b/docs/getting-started/project-structure.md
index 1609d9da05..707abbfc84 100644
--- a/docs/getting-started/project-structure.md
+++ b/docs/getting-started/project-structure.md
@@ -1,19 +1,73 @@
-# Recommended Project structure
+# Recommended Project Structure
 
-The React on Rails generator uses the standard Shakapacker convention of this structure:
+React on Rails supports two main organizational approaches for your React components.
+
+## Modern Auto-Bundling Structure (Recommended)
+
+The current React on Rails generator creates a component-based structure optimized for automatic bundle generation:
 
 ```text
-app/javascript:
-  ├── bundles:
-  │   # Logical groups of files that can be used for code splitting
-  │   └── hello-world-bundle.js
-  ├── packs:
-  │   # only Webpack entry files here
-  │   └── hello-world-bundle.js
+app/javascript/
+├── src/
+│   ├── HelloWorld/
+│   │   ├── HelloWorld.module.css
+│   │   └── ror_components/          # Auto-discovered by React on Rails
+│   │       ├── HelloWorld.jsx       # Client & server rendering
+│   │       └── HelloWorld.server.js # Optional: server-only code
+│   └── AnotherComponent/
+│       └── ror_components/
+│           ├── AnotherComponent.client.jsx  # Client-only rendering
+│           └── AnotherComponent.server.jsx  # Server-only rendering
+└── packs/
+    ├── generated/                   # Auto-generated entry points (gitignored)
+    │   ├── HelloWorld.js
+    │   └── AnotherComponent.js
+    └── server-bundle.js             # Server rendering entry point
 ```
 
-Per the example repo [shakacode/react_on_rails_demo_ssr_hmr](https://github.com/shakacode/react_on_rails_demo_ssr_hmr),
-you should consider keeping your codebase mostly consistent with the defaults for [Shakapacker](https://github.com/shakacode/shakapacker).
+**Key features:**
+
+- Components in `ror_components/` directories are automatically discovered and registered
+- Each component gets its own webpack bundle for optimal code splitting
+- No manual `ReactOnRails.register()` calls needed
+- Supports separate `.client.jsx` and `.server.jsx` files for different rendering logic
+
+For details, see [Auto-Bundling Guide](../core-concepts/auto-bundling-file-system-based-automated-bundle-generation.md) and [Generator Details](../api-reference/generator-details.md).
+
+## Traditional Manual Structure (Legacy)
+
+For projects requiring explicit control over webpack entry points:
+
+```text
+app/javascript/
+├── bundles/
+│   └── HelloWorld/
+│       ├── components/
+│       │   └── HelloWorld.jsx
+│       └── startup/
+│           └── registration.js      # Manual ReactOnRails.register()
+└── packs/
+    └── hello-world-bundle.js        # Webpack entry point
+```
+
+This approach requires manual component registration and webpack configuration but offers complete control over bundling strategy.
+
+## Choosing Your Structure
+
+**Use modern auto-bundling if:**
+
+- Starting a new project
+- Want automatic code splitting per component
+- Prefer convention over configuration
+- Want to minimize boilerplate
+
+**Use traditional manual structure if:**
+
+- Have complex custom webpack requirements
+- Need fine-grained control over bundle composition
+- Migrating from older React on Rails versions
+
+For most projects, we recommend the modern auto-bundling approach.
 
 ## Steps to convert from the generator defaults to use a `/client` directory for source code
 
@@ -29,47 +83,71 @@ mv app/javascript client
 source_path: client
 ```
 
-## Moving node_modules from `/` to `/client` with a custom Webpack setup
+## Styling Your Components
 
-Shakapacker probably doesn't support having your main `node_modules` directory under `/client`, so only follow these steps if you want to use your own Webpack configuration.
+React on Rails supports multiple approaches for styling your components. The modern recommended approach uses **CSS Modules** with co-located stylesheets.
 
-1. Move the `/package.json` to `/client/package.json`
-2. Create a `/package.json` that delegates to `/client/package.json`.
-   ```json
-     "scripts": {
-       "heroku-postbuild": "cd ./client && yarn"
-     },
-   ```
-3. If your `node_modules` directory is not at the top level of the Rails project, then you will need to set the
-   ENV value of `SHAKAPACKER_CONFIG` to the location of the `config/shakapacker.yml` file per [rails/webpacker PR 2561](https://github.com/rails/webpacker/pull/2561). (Notice the change of spelling from Webpacker to Shakapacker)
+### Modern Approach: CSS Modules (Recommended)
 
-## CSS, Sass, Fonts, and Images
+The generator creates components with CSS Module support out of the box:
 
-Should you move your styling assets to Webpack, or stick with the plain Rails asset pipeline? It depends!
+```text
+app/javascript/src/HelloWorld/
+├── ror_components/
+│   ├── HelloWorld.client.jsx
+│   └── HelloWorld.module.css    # Co-located with component
+```
 
-Here's a good discussion of this option: [Why does Rails 6 include both Webpacker and Sprockets?](https://rossta.net/blog/why-does-rails-install-both-webpacker-and-sprockets.html).
+**Example usage:**
 
-You have 2 basic choices:
+```jsx
+import React from 'react';
+import * as style from './HelloWorld.module.css';
 
-### Simple Rails Way
+const HelloWorld = () => <label className={style.bright}>Hello World</label>;
+```
 
-This isn't really a technique, as you keep handling all your styling assets using Rails standard tools, such as using the [sass-rails gem](https://rubygems.org/gems/sass-rails/versions/5.0.4). Basically, Webpack doesn't get involved with styling. Your Rails layouts just continue doing the styling the standard Rails way.
+**Benefits:**
 
-#### Advantages to the Simple Rails Way
+- **Scoped styles**: Class names are automatically scoped to prevent conflicts
+- **Co-location**: Styles live next to their components for better organization
+- **Type safety**: Works seamlessly with TypeScript
+- **Hot reloading**: Style changes reload instantly without page refresh
+- **Zero configuration**: Works out of the box with the generator
 
-1. Much simpler! There's no change from your current processes.
+### Alternative: Rails Asset Pipeline
 
-### Using Webpack to Manage Styling Assets
+You can continue using Rails' traditional asset pipeline with [sass-rails](https://rubygems.org/gems/sass-rails) or similar gems:
 
-This technique involves customization of the Webpack config files to generate CSS, image, and font assets.
+```erb
+<%# app/views/layouts/application.html.erb %>
+<%= stylesheet_link_tag 'application', media: 'all' %>
+```
 
-#### Directory structure
+**Use this approach when:**
 
-1. `/client/app/assets`: Assets for CSS for client app.
-1. `/client/app/assets/fonts` and `/client/app/assets/styles`: Globally shared assets for styling. Note, most Sass and image assets will be stored next to the JavaScript files.
+- You have existing Rails stylesheets you want to keep
+- You prefer keeping styles completely separate from JavaScript
+- You don't need component-scoped styling
 
-#### Advantages to having Webpack Manage Styles
+### Advanced: Global Styles with Webpack
 
-1. You can use [CSS modules](https://github.com/css-modules/css-modules), which is super compelling once you see the benefits.
-1. You can use CSS in JS.
-1. You can do hot reloading of your assets. Thus, you do not have to refresh your web page to see asset change, including changing styles.
+For global styles (fonts, resets, variables), you can create additional webpack entry points:
+
+```text
+app/javascript/
+├── packs/
+│   ├── application.css    # Global styles
+│   └── server-bundle.js
+└── src/
+    └── HelloWorld/
+        └── ror_components/
+            ├── HelloWorld.jsx
+            └── HelloWorld.module.css
+```
+
+Import global styles in your layout:
+
+```erb
+<%= stylesheet_pack_tag 'application' %>
+```
diff --git a/docs/getting-started/quick-start.md b/docs/getting-started/quick-start.md
index a17ca92b5d..48d24938f8 100644
--- a/docs/getting-started/quick-start.md
+++ b/docs/getting-started/quick-start.md
@@ -12,7 +12,7 @@ Before starting, make sure you have:
 - **🚨 Shakapacker 6+** (7+ recommended for React on Rails 16)
 - **Rails 7+** application (Rails 5.2+ supported)
 - **Ruby 3.0+** (required)
-- **Node.js 18+** and **Yarn**
+- **Node.js 20+** and **Yarn**
 - **Basic familiarity** with React and Rails
 
 > 💡 **Don't have a Rails app?** Run `rails new my_react_app` first.
@@ -124,7 +124,7 @@ With React on Rails auto-bundling, you don't need manual registration! Just add
 <%= react_component("SimpleCounter", { initialCount: 5 }, { auto_load_bundle: true }) %>
 ```
 
-Note, your layout needs to include this in the `<head>`:
+Note, your layout needs to include this in the `<head>` section:
 
 ```erb
     <%= stylesheet_pack_tag %>
@@ -159,7 +159,7 @@ Now that you have React on Rails working, here's what to explore next:
 
 ### Immediate Next Steps
 
-1. **[Basic Configuration](../getting-started.md)** - Understand the setup
+1. **[Using React on Rails](./using-react-on-rails.md)** - Core concepts explained
 2. **[View Helpers API](../api-reference/view-helpers-api.md)** - Learn all the options for `react_component`
 3. **[Hot Module Replacement](../building-features/hmr-and-hot-reloading-with-the-webpack-dev-server.md)** - Optimize your dev workflow
 
@@ -173,7 +173,6 @@ Now that you have React on Rails working, here's what to explore next:
 
 1. **[Redux Integration](../building-features/react-and-redux.md)** - Manage application state
 2. **[React Router](../building-features/react-router.md)** - Client-side routing
-3. **[Code Splitting](../building-features/code-splitting.md)** - Optimize bundle size
 
 ## 🆘 Need Help?
 
diff --git a/docs/getting-started/tutorial.md b/docs/getting-started/tutorial.md
index 90d518b53f..8dea0ead40 100644
--- a/docs/getting-started/tutorial.md
+++ b/docs/getting-started/tutorial.md
@@ -4,7 +4,7 @@ _Also see the example repo of [React on Rails Tutorial With SSR, HMR fast refres
 
 ---
 
-_Updated for Ruby 2.7, Rails 7, React on Rails v13, and Shakapacker v7_
+_Updated for Ruby 3.0+, Rails 7, React on Rails v16, and Shakapacker v7_
 
 This tutorial guides you through setting up a new or existing Rails app with **React on Rails**, demonstrating Rails + React + Redux + Server Rendering.
 
@@ -22,7 +22,7 @@ By the time you read this, the latest may have changed. Be sure to check the ver
 - [https://rubygems.org/gems/react_on_rails](https://rubygems.org/gems/react_on_rails)
 - [https://www.npmjs.com/package/react-on-rails](https://www.npmjs.com/package/react-on-rails)
 
-# Table of Contents
+## Table of Contents
 
 - [Installation](#installation)
   - [Setting up your environment](#setting-up-your-environment)
@@ -33,34 +33,32 @@ By the time you read this, the latest may have changed. Be sure to check the ver
   - [Setting up your environment variables](#setting-up-your-environment-variables)
   - [Running the app](#running-the-app)
 - [HMR vs. React Hot Reloading](#hmr-vs-react-hot-reloading)
-- [Deploying to Heroku](#deploying-to-heroku)
-  - [Create Your Heroku App](#create-your-heroku-app)
-  - [Swap out sqlite for postgres](#swap-out-sqlite-for-postgres)
-- [Other features](#other-features)
+- [Deployment](#deployment)
+- [Going Further](#going-further)
   - [Turning on Server Rendering](#turning-on-server-rendering)
-  - [Moving from the Rails default `/app/javascript` to the recommended `/client` structure](#moving-from-the-rails-default-appjavascript-to-the-recommended-client-structure)
-  - [Using HMR with the shakapacker setup](#using-hmr-with-the-shakapacker-setup)
-  - [Custom IP & PORT setup (Cloud9 example)](#custom-ip--port-setup-cloud9-example)
-  - [RubyMine performance tip](#rubymine-performance-tip)
+  - [Optional Configuration](#optional-configuration)
+    - [Moving from the Rails default `/app/javascript` to the recommended `/client` structure](#moving-from-the-rails-default-appjavascript-to-the-recommended-client-structure)
+    - [Custom IP & PORT setup (Cloud9 example)](#custom-ip--port-setup-cloud9-example)
+    - [RubyMine performance tip](#rubymine-performance-tip)
 - [Conclusion](#conclusion)
 
-# Installation
+## Installation
 
-## Setting up your environment
+### Setting up your environment
 
 Trying out **React on Rails** is super easy, so long as you have the basic prerequisites.
 
 - **Ruby:** We support all active Ruby versions but recommend using the latest stable Ruby version. Solutions like [rvm](https://rvm.io) or [rbenv](https://github.com/rbenv/rbenv) make it easy to have multiple Ruby versions on your machine.
-- **Rails:** We support Rails 6 and later.
+- **Rails:** This tutorial targets Rails 7.0+. React on Rails supports Rails 6 and later, but some tutorial steps may differ for Rails 6.
 - **Nodejs:** We support all [active Node versions](https://github.com/nodejs/release#release-schedule) but recommend using the latest LTS release of Nodejs for the longest support. Older inactive node versions might still work but is not guaranteed. We also recommend using [nvm](https://github.com/nvm-sh/nvm/) to ease using different node versions in different projects.
 - **yarn:** We use [yarn classic](https://classic.yarnpkg.com/) as our node package manager.
 - You need to have either [Overmind](https://github.com/DarthSim/overmind) or [Foreman](https://rubygems.org/gems/foreman) as a process manager.
 
-## Create a new Ruby on Rails App
+### Create a new Ruby on Rails App
 
 Then we need to create a fresh Rails application as follows.
 
-First, be sure to run `rails -v` and check you are using Rails 5.1.3 or above. If you are using an older version of Rails, you'll need to install Webpacker with React per the instructions [here](https://github.com/rails/webpacker).
+First, be sure to run `rails -v` and check you are using Rails 7.0 or above for this tutorial.
 
 ```bash
 # For Rails 6.x
@@ -74,7 +72,7 @@ cd test-react-on-rails
 
 Note: You can use `--database=postgresql` option to use Postgresql for the database.
 
-## Add the Shakapacker and react_on_rails gems
+### Add the Shakapacker and react_on_rails gems
 
 We recommend using the latest version of these gems. Otherwise, specify the
 exact versions of both the gem and npm packages. In other words, don't use
@@ -88,7 +86,7 @@ bundle add shakapacker --strict
 Note: The latest released React On Rails version is considered stable. Please use the latest
 version to ensure you get all the security patches and the best support.
 
-## Run the Shakapacker generator
+### Run the Shakapacker generator
 
 ```bash
 bundle exec rails shakapacker:install
@@ -102,7 +100,7 @@ git commit -am "Initial commit"
 
 Alternatively, you can use `--ignore-warnings` in the next step.
 
-## Run the React on Rails Generator
+### Run the React on Rails Generator
 
 ```bash
 rails generate react_on_rails:install
@@ -112,14 +110,15 @@ You will be prompted to approve changes in certain files. Press `enter` to proce
 one by one or enter `a` to replace all configuration files required by the project.
 You can check the diffs before you commit to see what changed.
 
-Note, using `redux` is no longer recommended as the basic installer uses React Hooks.
-If you want the Redux install, run:
+**Note on Redux:** The basic installer uses React Hooks for state management. However, this tutorial demonstrates Redux integration (as used in the [live example](https://reactrails.com/)). To follow this tutorial with Redux, run:
 
 ```bash
 rails generate react_on_rails:install --redux
 ```
 
-## Setting up your environment variables
+If you prefer to use React Hooks instead of Redux, run the basic installer without the `--redux` flag.
+
+### Setting up your environment variables
 
 Add the following variable to your environment:
 
@@ -129,7 +128,7 @@ EXECJS_RUNTIME=Node
 
 Then run the server with one of the following options:
 
-## Running the app
+### Running the app
 
 ```bash
 ./bin/dev # For HMR
@@ -139,157 +138,42 @@ Then run the server with one of the following options:
 
 Visit [http://localhost:3000/hello_world](http://localhost:3000/hello_world) and see your **React On Rails** app running!
 
-# HMR vs. React Hot Reloading
+## HMR vs. React Hot Reloading
 
 First, check that the `hmr` and the `inline` options are `true` in your `config/shakapacker.yml` file.
 
-The basic setup will have HMR working with the default Shakapacker setup. The basic
-[HMR](https://webpack.js.org/concepts/hot-module-replacement/), without a special
-React setup, will cause a full page refresh each time you save a file.
-
-# Deploying to Heroku
-
-## Create Your Heroku App
-
-_Assuming you can log in to heroku.com and have logged into your shell for Heroku._
-
-1. Visit [https://dashboard.heroku.com/new](https://dashboard.heroku.com/new) and create an app, say named `my-name-react-on-rails`:
-
-![06](https://cloud.githubusercontent.com/assets/20628911/17465014/1f29bf3c-5cf4-11e6-869f-4215987ae854.png)
-
-Run this command that looks like this from your new Heroku app
-
-```bash
-heroku git:remote -a my-name-react-on-rails
-```
-
-Set heroku to use multiple buildpacks:
-
-```bash
-heroku buildpacks:set heroku/ruby
-heroku buildpacks:add --index 1 heroku/nodejs
-```
-
-## Swap out sqlite for postgres
-
-Heroku requires your app to use Postgresql. If you have not set up your app
-with Postgresql, you need to change your app settings to use this database.
-
-Run the following command (in Rails 6+):
-
-```bash
-rails db:system:change --to=postgresql
-```
-
-If for any reason you want to do this process manually, run these two commands:
-
-```bash
-bundle remove sqlite3
-bundle add pg
-```
-
-![07](https://cloud.githubusercontent.com/assets/20628911/17465015/1f2f4042-5cf4-11e6-8287-2fb077550809.png)
-
-Now replace your `database.yml` file with this (assuming your app name is "ror").
-
-```yml
-default: &default
-  adapter: postgresql
-  username:
-  password:
-  host: localhost
-
-development:
-  <<: *default
-  database: ror_development
-
-# Warning: The database defined as "test" will be erased and
-# re-generated from your development database when you run "rake".
-# Do not set this db to the same as development or production.
-test:
-  <<: *default
-  database: ror_test
-
-production:
-  <<: *default
-  database: ror_production
-```
-
-Then you need to set up Postgres so you can run locally:
-
-```bash
-rake db:setup
-rake db:migrate
-```
-
-![08](https://cloud.githubusercontent.com/assets/20628911/17465016/1f3559f0-5cf4-11e6-8ab4-c5572e4644a5.png)
-
-Optionally you can add this line to your `routes.rb`. That way, your root page will go to the Hello World page for React On Rails.
-
-```ruby
-root "hello_world#index"
-```
+The basic setup will have HMR working with the default Shakapacker setup. When you run `./bin/dev` and change a JSX file, the browser will automatically refresh!
 
-![09](https://cloud.githubusercontent.com/assets/20628911/17465018/1f3b685e-5cf4-11e6-93f8-105fc48517d0.png)
+The basic [HMR](https://webpack.js.org/concepts/hot-module-replacement/), without a special React setup, will cause a full page refresh each time you save a file.
 
-Next, configure your app for Puma, per the [instructions on Heroku](https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server).
-
-Create `./Procfile` with the following content. This is what Heroku uses to start your app.
-
-```
-web: bundle exec puma -C config/puma.rb
-```
+If you want to go further with HMR, take a look at these links:
 
-Note, newer versions of Rails create this file automatically. However, the [docs on Heroku](https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server#config) have something a bit different, so please make it conform to those docs. As of 2020-06-04, the docs looked like this:
-
-`config/puma.rb`
-
-```rb
-workers Integer(ENV['WEB_CONCURRENCY'] || 2)
-threads_count = Integer(ENV['RAILS_MAX_THREADS'] || 5)
-threads threads_count, threads_count
-
-preload_app!
-
-rackup      DefaultRackup
-port        ENV['PORT']     || 3000
-environment ENV['RACK_ENV'] || 'development'
-
-on_worker_boot do
-  # Worker specific setup for Rails 4.1+
-  # See: https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server#on-worker-boot
-  ActiveRecord::Base.establish_connection
-end
-```
+- [webpack-dev-server](https://github.com/rails/webpacker/blob/5-x-stable/docs/webpack-dev-server.md)
+- [DevServer](https://webpack.js.org/configuration/dev-server/)
+- [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/)
 
-Next, update your `package.json` to specify the version of yarn and node. Add this section:
+React on Rails will automatically handle disabling server rendering if there is only one bundle file created by the Webpack development server by `shakapacker`.
 
-```json
-  "engines": {
-    "node": "16.19.0",
-    "yarn": "1.22.4"
-  },
-```
+## Deployment
 
-Then after all changes are done don't forget to commit them with git and finally, you can push your app to Heroku!
+Now that you have React on Rails working locally, you're ready to deploy to production!
 
-```bash
-git add -A
-git commit -m "Changes for Heroku"
-git push heroku master
-```
+For detailed deployment instructions, see:
 
-Then run:
+- **[Heroku Deployment Guide](../deployment/heroku-deployment.md)** - Step-by-step Heroku deployment
+- **[General Deployment Guide](../deployment/deployment.md)** - Production deployment strategies for any platform
 
-```bash
-heroku open
-```
+These guides cover:
 
-and you will see your live app and you can share this URL with your friends. Congrats!
+- Configuring buildpacks
+- Database setup (PostgreSQL)
+- Asset compilation
+- Environment variables
+- Troubleshooting common deployment issues
 
-# Other features
+## Going Further
 
-## Turning on Server Rendering
+### Turning on Server Rendering
 
 You can turn on server rendering by simply changing the `prerender` option to `true`:
 
@@ -333,7 +217,9 @@ For more details on server rendering, see:
 - [Client vs. Server Rendering](../core-concepts/client-vs-server-rendering.md)
 - [React Server Rendering](../core-concepts/react-server-rendering.md)
 
-## Moving from the Rails default `/app/javascript` to the recommended `/client` structure
+### Optional Configuration
+
+#### Moving from the Rails default `/app/javascript` to the recommended `/client` structure
 
 ShakaCode recommends that you use `/client` for your client side app. This way a non-Rails, front-end developer can be at home just by opening up the `/client` directory.
 
@@ -349,21 +235,7 @@ mv app/javascript client
 source_path: client
 ```
 
-## Using HMR with the shakapacker setup
-
-Start the app using `overmind start -f Procfile.dev` or `foreman start -f Procfile.dev`.
-
-When you change and save a JSX file, the browser will automatically refresh!
-
-So you get some basics from HMR with no code changes. If you want to go further, take a look at these links:
-
-- [webpack-dev-server](https://github.com/rails/webpacker/blob/5-x-stable/docs/webpack-dev-server.md)
-- [DevServer](https://webpack.js.org/configuration/dev-server/)
-- [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/)
-
-React on Rails will automatically handle disabling server rendering if there is only one bundle file created by the Webpack development server by `shakapcker`.
-
-## Custom IP & PORT setup (Cloud9 example)
+#### Custom IP & PORT setup (Cloud9 example)
 
 In case you are running some custom setup with different IP or PORT you should also edit Procfile.dev. For example, to be able to run on free Cloud9 IDE we are putting IP 0.0.0.0 and PORT 8080. The default generated file `Procfile.dev` uses `-p 3000`.
 
@@ -373,14 +245,14 @@ web: rails s -p 8080 -b 0.0.0.0
 
 Then visit https://your-shared-addr.c9users.io:8080/hello_world
 
-## RubyMine performance tip
+#### RubyMine performance tip
 
 It's super important to exclude certain directories from RubyMine or else it will slow to a crawl as it tries to parse all the npm files.
 
 - Generated files, per the settings in your `config/shakapacker.yml`, which default to `public/packs` and `public/packs-test`
 - `node_modules`
 
-# Conclusion
+## Conclusion
 
 - Browse the docs on [our documentation website](https://www.shakacode.com/react-on-rails/docs/)
 
diff --git a/docs/getting-started/using-react-on-rails.md b/docs/getting-started/using-react-on-rails.md
new file mode 100644
index 0000000000..9dd7f672d0
--- /dev/null
+++ b/docs/getting-started/using-react-on-rails.md
@@ -0,0 +1,246 @@
+# Understanding React on Rails
+
+This guide explains the core concepts of React on Rails and how everything fits together. If you've just installed React on Rails (or are about to), this will help you understand what's happening under the hood.
+
+> **💡 New to React on Rails?** Start with the [15-Minute Quick Start](./quick-start.md) to get something working first, then come back here to understand the concepts.
+
+---
+
+## Installation Overview
+
+When you install React on Rails, several things happen:
+
+1. **Ruby gem installed** - Provides Rails integration, view helpers, and SSR support
+2. **NPM package installed** - Client-side JavaScript library for registering components
+3. **Generator creates files** - Component structure, webpack config, sample code
+4. **Shakapacker configured** - Webpack integration for Rails (required dependency)
+
+The generator sets up:
+
+- Component directories (typically `app/javascript/bundles/` or with auto-bundling in `app/javascript/src/*/ror_components/`)
+- Rails integration (controllers, views, initializer)
+- Webpack configuration for building JavaScript bundles
+- Development workflow with hot module replacement
+
+**For detailed installation instructions, see:**
+
+- **[Quick Start Guide](./quick-start.md)** - Fastest path (15 minutes)
+- **[Installation Guide](./installation-into-an-existing-rails-app.md)** - For existing Rails apps
+- **[Complete Tutorial](./tutorial.md)** - Step-by-step with Redux and routing
+
+---
+
+## Using React Components in Rails Views
+
+Once installed, you render React components in Rails views using the `react_component` helper:
+
+```erb
+<%= react_component("HelloWorld", props: @some_props) %>
+```
+
+### Basic Options
+
+**Client-side rendering only (default):**
+
+```erb
+<%= react_component("HelloWorld", props: { name: "World" }) %>
+```
+
+**Server-side rendering for SEO/performance:**
+
+```erb
+<%= react_component("HelloWorld", props: { name: "World" }, prerender: true) %>
+```
+
+The component name (`"HelloWorld"`) must match the name you registered in your JavaScript code.
+
+### Configuration
+
+React on Rails is configured in `config/initializers/react_on_rails.rb`:
+
+- Server rendering settings
+- Development vs production behavior
+- Logging options
+- Auto-bundling settings
+
+For complete configuration options, see the [Configuration Reference](../api-reference/configuration.md).
+
+For all view helper options (props, HTML options, tracing, etc.), see the [View Helpers API](../api-reference/view-helpers-api.md).
+
+---
+
+## Auto-Bundling and Component Registration
+
+React on Rails supports two approaches for making components available to Rails views:
+
+### Traditional Manual Registration
+
+```js
+// app/javascript/packs/hello-world-bundle.js
+import ReactOnRails from 'react-on-rails';
+import HelloWorld from '../components/HelloWorld';
+
+ReactOnRails.register({ HelloWorld });
+```
+
+You must configure webpack entry points and manually register each component.
+
+### Modern Auto-Bundling (Recommended)
+
+```erb
+<%= react_component("HelloWorld", { name: "World" }, { auto_load_bundle: true }) %>
+```
+
+With auto-bundling enabled:
+
+1. Place components in designated directories (e.g., `app/javascript/src/*/ror_components/`)
+2. React on Rails automatically finds and bundles them
+3. No manual webpack configuration needed
+4. No manual `ReactOnRails.register()` calls
+5. Components are loaded on-demand per page
+
+**Configuration (in `config/initializers/react_on_rails.rb`):**
+
+```ruby
+config.components_subdirectory = "ror_components"  # Directory name for auto-discovery
+config.auto_load_bundle = true                      # Enable automatic bundle loading
+```
+
+**Benefits:**
+
+- Eliminates boilerplate configuration
+- Automatic code splitting per component
+- Smaller initial bundle sizes
+- Components only loaded when used
+
+For complete details, see [Auto-Bundling Guide](../core-concepts/auto-bundling-file-system-based-automated-bundle-generation.md).
+
+---
+
+## Understanding What the Generator Creates
+
+After running `rails generate react_on_rails:install`, you'll see:
+
+### Component Structure
+
+```text
+app/javascript/
+└── bundles/HelloWorld/          # or src/HelloWorld/ror_components/ with auto-bundling
+    └── HelloWorld.jsx
+```
+
+### Rails Integration
+
+- **Controller**: `app/controllers/hello_world_controller.rb` - Example controller
+- **View**: `app/views/hello_world/index.html.erb` - Shows `react_component` helper usage
+- **Route**: Added to `config/routes.rb`
+- **Initializer**: `config/initializers/react_on_rails.rb` - Configuration
+
+### Webpack Configuration
+
+- Shakapacker handles webpack setup
+- Config in `config/shakapacker.yml`
+- For custom webpack needs, see [Webpack Configuration Guide](../core-concepts/webpack-configuration.md)
+
+### Development Workflow
+
+The generator creates `bin/dev` for starting both:
+
+- Rails server (port 3000)
+- Webpack dev server (for hot reloading)
+
+---
+
+## Render-Functions and RailsContext
+
+Sometimes you need more than just a simple React component. **Render-Functions** let you:
+
+1. Access Rails context (current URL, locale, etc.)
+2. Initialize Redux stores with props
+3. Set up React Router
+4. Return different components based on props
+
+### Basic Example
+
+```js
+const MyApp = (props, railsContext) => {
+  // Access Rails context
+  console.log(railsContext.pathname); // Current URL
+  console.log(railsContext.i18nLocale); // Current locale
+
+  // Return a React component
+  return () => <div>Hello from {railsContext.pathname}</div>;
+};
+
+export default MyApp;
+```
+
+### When to Use Render-Functions
+
+- **Need railsContext** - Access current URL, locale, or custom Rails data
+- **Redux integration** - Initialize store with server-side props
+- **React Router** - Set up routing with initial URL from Rails
+- **Conditional rendering** - Return different components based on props
+
+### Server-Side Rendering with Render-Functions
+
+For advanced server rendering (like React Router), you can return an object:
+
+```js
+({
+  renderedHtml: {
+    componentHtml,
+    redirectLocation,
+    error,
+  },
+});
+```
+
+Use with `react_component_hash` helper for multiple HTML strings (useful with React Helmet for meta tags).
+
+For complete Render-Function details and examples, see the [Render-Functions Guide](../core-concepts/render-functions.md).
+
+---
+
+## Error Handling
+
+- All React on Rails errors are of type `ReactOnRails::Error`
+- Server rendering errors include context for HoneyBadger/Sentry
+- Configure error behavior in `config/initializers/react_on_rails.rb`
+
+For troubleshooting common issues, see the [Troubleshooting Guide](../deployment/troubleshooting.md).
+
+---
+
+## Next Steps
+
+Now that you understand the core concepts, here are recommended paths forward:
+
+### Build Features
+
+- **[Redux Integration](../building-features/react-and-redux.md)** - Add state management
+- **[React Router](../building-features/react-router.md)** - Client-side routing
+- **[Server-Side Rendering](../core-concepts/react-server-rendering.md)** - Deep dive into SSR
+- **[Internationalization](../building-features/i18n.md)** - Add i18n support
+- **[Testing](../building-features/rspec-configuration.md)** - Test your React components
+
+### Deploy to Production
+
+- **[Deployment Guide](../deployment/deployment.md)** - Production deployment strategies
+- **[Heroku Deployment](../deployment/heroku-deployment.md)** - Deploy to Heroku
+- **[Troubleshooting](../deployment/troubleshooting.md)** - Common deployment issues
+
+### Advanced Topics
+
+- **[Webpack Configuration](../core-concepts/webpack-configuration.md)** - Customize webpack
+- **[Different Client/Server Code](../building-features/how-to-use-different-files-for-client-and-server-rendering.md)** - Separate bundles
+
+### API Reference
+
+- **[View Helpers API](../api-reference/view-helpers-api.md)** - Complete `react_component` options
+- **[JavaScript API](../api-reference/javascript-api.md)** - ReactOnRails JavaScript methods
+- **[Configuration](../api-reference/configuration.md)** - All configuration options
+
+---
+
+**Ready to build something?** The [Tutorial](./tutorial.md) walks you through building a complete app with Redux, routing, and testing.
diff --git a/docs/guides/advanced/README.md b/docs/guides/advanced/README.md
deleted file mode 100644
index 9b0b1d866f..0000000000
--- a/docs/guides/advanced/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Advanced Features
-
-Advanced React on Rails features and patterns.
-
-- [Auto-Bundling](../../core-concepts/auto-bundling-file-system-based-automated-bundle-generation.md)
-- [Server-Side Rendering](../../core-concepts/react-server-rendering.md)
-- [Performance Optimization](../../core-concepts/webpack-configuration.md)
diff --git a/docs/home.md b/docs/home.md
deleted file mode 100644
index a0747f56aa..0000000000
--- a/docs/home.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# React on Rails
-
-## Details
-
-1. [Overview](./core-concepts/react-on-rails-overview.md)
-1. [Getting Started](./getting-started.md)
-1. [How React on Rails Works](./core-concepts/how-react-on-rails-works.md)
-1. [Webpack Configuration](./core-concepts/webpack-configuration.md)
-1. [View Helpers API](./api-reference/view-helpers-api.md)
-1. [Caching and Performance: React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/).
-1. [Deployment](./deployment/deployment.md).
-
-## Changes and Upgrades
-
-1. [CHANGELOG.md](https://github.com/shakacode/react_on_rails/tree/master/CHANGELOG.md)
-2. [Upgrading React on Rails](./upgrading/upgrading-react-on-rails.md)
-3. [Troubleshooting Build Errors](./deployment/troubleshooting-build-errors.md)
-
-## Example Apps
-
-1. [spec/dummy](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy) example repo for a simple configuration of Webpack via the `shakacode/shakapacker` gem
-   that supports SSR.
-2. Example repo of [React on Rails Tutorial With SSR, HMR fast refresh, and TypeScript](https://github.com/shakacode/react_on_rails_demo_ssr_hmr) for a new way to set up the creation of your SSR bundle with `shakacode/shakapacker`.
-3. Live, [open source](https://github.com/shakacode/react-webpack-rails-tutorial), example of this gem, see [reactrails.com](https://reactrails.com).
-
-# Other Resources
-
-1. RailsConf 2020 talk: [Webpacker, It-Just-Works, But How?](https://www.shakacode.com/blog/railsconf-2020-webpacker-it-just-works-but-how/)
diff --git a/docs/introduction.md b/docs/introduction.md
new file mode 100644
index 0000000000..2cfadd279b
--- /dev/null
+++ b/docs/introduction.md
@@ -0,0 +1,132 @@
+# React on Rails
+
+> **Integrate React components seamlessly into your Rails application with server-side rendering, hot reloading, and more.**
+
+React on Rails integrates Rails with React, providing a high-performance framework for server-side rendering (SSR) and seamless component integration via [Shakapacker](https://github.com/shakacode/shakapacker).
+
+## What is React on Rails?
+
+React on Rails bridges the gap between Ruby on Rails and React, allowing you to:
+
+- Render React components directly from Rails views with the `react_component` helper
+- Pass props from Rails to React without building a separate API
+- Enable server-side rendering for better SEO and initial page load performance
+- Use hot module replacement (HMR) for fast development iterations
+- Integrate with Redux, React Router, and the modern React ecosystem
+
+Unlike a separate SPA approach, React on Rails lets you leverage Rails conventions while progressively enhancing your UI with React components.
+
+## Why React on Rails?
+
+**Key Benefits:**
+
+1. **No Separate API Required** - Pass data directly from Rails views to React components
+2. **Server-Side Rendering** - Built-in SSR support for SEO and performance (not available in Shakapacker alone)
+3. **Rails Integration** - Works with Rails conventions, asset pipeline, and existing apps
+4. **Modern Tooling** - Full Webpack, HMR, and NPM ecosystem support via Shakapacker
+5. **Progressive Enhancement** - Mix Rails views with React components on the same page
+
+## When to Use React on Rails
+
+**Choose React on Rails if:**
+
+- ✅ You have an existing Rails application
+- ✅ You want React's component model and ecosystem
+- ✅ You need server-side rendering for SEO or performance
+- ✅ You want to avoid building and maintaining a separate API
+- ✅ You value Rails conventions and want tight integration
+
+**Consider alternatives if:**
+
+- ❌ You're building a standalone SPA with a separate API backend
+
+## Getting Started
+
+Choose your path based on your situation:
+
+### 🚀 New to React on Rails?
+
+**[15-Minute Quick Start →](./getting-started/quick-start.md)**
+
+Get your first component running in minutes. Perfect for exploring React on Rails quickly.
+
+### 📦 Adding to an Existing Rails App?
+
+**[Installation Guide →](./getting-started/installation-into-an-existing-rails-app.md)**
+
+Detailed integration instructions for existing Rails applications with Shakapacker.
+
+### 📚 Want a Comprehensive Tutorial?
+
+**[Complete Tutorial →](./getting-started/tutorial.md)**
+
+Step-by-step walkthrough building a full app with Redux, routing, and deployment.
+
+### 👀 Learn by Example?
+
+- **[Spec/Dummy App](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy)** - Simple example in this repo
+- **[Tutorial Demo App](https://github.com/shakacode/react_on_rails_demo_ssr_hmr)** - Example with SSR, HMR, and TypeScript
+- **[Live Demo with Source](https://github.com/shakacode/react-webpack-rails-tutorial)** - Full production app at [reactrails.com](https://reactrails.com)
+
+## Popular Use Cases
+
+Find guidance for your specific scenario:
+
+| I want to...                        | Go here                                                                               |
+| ----------------------------------- | ------------------------------------------------------------------------------------- |
+| **Add React to existing Rails app** | [Installation Guide](./getting-started/installation-into-an-existing-rails-app.md)    |
+| **Enable server-side rendering**    | [SSR Guide](./core-concepts/react-server-rendering.md)                                |
+| **Set up hot reloading**            | [HMR Setup](./building-features/hmr-and-hot-reloading-with-the-webpack-dev-server.md) |
+| **Use Redux with Rails**            | [Redux Integration](./building-features/react-and-redux.md)                           |
+| **Deploy to production**            | [Deployment Guide](./deployment/deployment.md)                                        |
+| **Troubleshoot issues**             | [Troubleshooting](./deployment/troubleshooting.md)                                    |
+
+## Core Concepts
+
+Before building features, understand these fundamentals:
+
+- **[How React on Rails Works](./core-concepts/how-react-on-rails-works.md)** - Architecture overview
+- **[Auto-Bundling](./core-concepts/auto-bundling-file-system-based-automated-bundle-generation.md)** - Automatic component registration and bundle generation
+- **[Client vs Server Rendering](./core-concepts/client-vs-server-rendering.md)** - When to use each
+- **[Webpack Configuration](./core-concepts/webpack-configuration.md)** - Customizing your build
+
+## Philosophy
+
+React on Rails follows the **[Rails Doctrine](https://rubyonrails.org/doctrine)** and extends it to modern JavaScript development:
+
+- **Convention over Configuration** - Sensible defaults for JavaScript tooling with Rails
+- **Optimize for Programmer Happiness** - Hot reloading, ES6+, CSS modules, NPM ecosystem
+- **Value Integrated Systems** - Tight Rails integration beats separate microservices for most apps
+
+Read the full **[React on Rails Doctrine](./misc/doctrine.md)** for our design philosophy.
+
+## System Requirements
+
+- **Rails 7+** (Rails 5.2+ supported)
+- **Ruby 3.0+**
+- **Node.js 20+**
+- **Shakapacker 6+** (7+ recommended for React on Rails v16)
+
+## Need Help?
+
+### Community Support
+
+- **Active Community** - [Thousands of production sites use React on Rails](https://publicwww.com/websites/%22react-on-rails%22++-undeveloped.com+depth%3Aall/)
+- **[React on Rails Discussions](https://github.com/shakacode/react_on_rails/discussions)** - Ask questions and share knowledge
+- **[React + Rails Slack](https://reactrails.slack.com)** - Real-time community help
+- **[GitHub Issues](https://github.com/shakacode/react_on_rails/issues)** - Report bugs
+
+### Professional Support
+
+- **[React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/)** - Advanced features (React Server Components, Suspense SSR, streaming)
+- **[ShakaCode Consulting](mailto:react_on_rails@shakacode.com)** - Expert help with React on Rails projects
+
+## External Resources
+
+- **[Shakapacker Documentation](https://github.com/shakacode/shakapacker)** - Webpack integration for Rails (required)
+- **[React Documentation](https://react.dev)** - Official React documentation
+- **[Rails Guides](https://guides.rubyonrails.org)** - Ruby on Rails documentation
+
+---
+
+**Ready to start?** Pick your path above and let's build something great! 🚀
diff --git a/docs/misc/credits.md b/docs/misc/credits.md
index 482831c8d7..e9bfb94708 100644
--- a/docs/misc/credits.md
+++ b/docs/misc/credits.md
@@ -1,3 +1,5 @@
+# React on Rails Credits and Authors
+
 ## Authors
 
 [The Shaka Code team!](http://www.shakacode.com/about/)
diff --git a/docs/misc/doctrine.md b/docs/misc/doctrine.md
index 766601ab81..c4862c2749 100644
--- a/docs/misc/doctrine.md
+++ b/docs/misc/doctrine.md
@@ -4,7 +4,7 @@ By Justin Gordon, January 26, 2016
 
 This document is an extension and complement to [The Rails Doctrine](http://rubyonrails.org/doctrine/). If you haven't read that document, I suggest you do so first.
 
-To paraphrase the [React on Rails Overview](../core-concepts/react-on-rails-overview.md), the project objective is to provide an opinionated and optimal framework for integrating **Ruby on Rails** with modern JavaScript tooling and libraries.
+To paraphrase the [React on Rails Introduction](../introduction.md), the project objective is to provide an opinionated and optimal framework for integrating **Ruby on Rails** with modern JavaScript tooling and libraries.
 
 When considering what goes into **react_on_rails**, we ask ourselves, is the functionality related to the intersection of using Rails and with modern JavaScript? A good example is view helper integration of React components on a Rails view. If the answer is yes, then the functionality belongs right here.
 
diff --git a/docs/misc/style.md b/docs/misc/style.md
index 9248e6001c..38d9d5cf0f 100644
--- a/docs/misc/style.md
+++ b/docs/misc/style.md
@@ -33,7 +33,7 @@ Follow these style guidelines per the linter configuration. Basically, lint your
 - [Sass Guidelines](http://sass-guidelin.es/) by [Hugo Giraudel](http://hugogiraudel.com/)
 - [Github Front End Guidelines](http://primercss.io/guidelines/)
 
-# Git Usage
+## Git Usage
 
 - Follow a [GitHub flow](https://docs.github.com/en/get-started/using-github/github-flow) model where you branch off master for features.
 - Before merging a branch to master, rebase it on top of master, by using command like `git fetch; git checkout my-branch; git rebase -i origin/master`. Clean up your commit message at this point. Be super careful to communicate with anybody else working on this branch and do not do this when others have uncommitted changes. Ideally, your merge of your feature back to master should be one nice commit.
diff --git a/docs/misc/updating-dependencies.md b/docs/misc/updating-dependencies.md
index c58dc4dc4a..afa16be9cc 100644
--- a/docs/misc/updating-dependencies.md
+++ b/docs/misc/updating-dependencies.md
@@ -1,4 +1,4 @@
-# Updating Dependencies
+# Updating Ruby and JavaScript Dependencies
 
 If you frequently update dependencies in small batches, you will avoid large and painful updates later. Then again, if you don't have good test coverage, it's hazardous to update dependencies at any time.
 
diff --git a/docs/outdated/converting-from-custom-webpack-config-to-rails-webpacker-config.md b/docs/outdated/converting-from-custom-webpack-config-to-rails-webpacker-config.md
deleted file mode 100644
index 96df3d8a54..0000000000
--- a/docs/outdated/converting-from-custom-webpack-config-to-rails-webpacker-config.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# Converting from Custom Webpack Config to Rails Shakapacker Config
-
-1. Compare your `package.json` and the dependencies in https://github.com/shakacode/shakapacker/blob/master/package.json
-   and avoid any duplicates. We don't want different versions of the same packages.
-   We want the versions from `shakacode/shakapacker` unless we specifically want to override them.
-2. Search the `shakacode/shakapacker` repo for anything you're not sure about in terms of package names.
-3. Run `bin/shakapacker` and make sure there are zero errors
-4. Update Webpack plugins and loaders to current or close to current
-5. Make sure that your `bin/shakapacker` and `bin/shakapacker` match the latest on
-   https://github.com/shakacode/shakapacker/tree/master/lib/install/bin
diff --git a/docs/outdated/deferred-rendering.md b/docs/outdated/deferred-rendering.md
deleted file mode 100644
index 9badd2a41e..0000000000
--- a/docs/outdated/deferred-rendering.md
+++ /dev/null
@@ -1,37 +0,0 @@
-# Deferred Rendering
-
-Please see [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/) if you are interested in code splitting using
-[loadable-components.com](https://loadable-components.com/docs) with React on Rails.
-
----
-
-What is code splitting? From the Webpack documentation:
-
-> For big web apps it’s not efficient to put all code into a single file, especially if some blocks of code are only required under some circumstances. Webpack has a feature to split your codebase into “chunks” which are loaded on demand. Some other bundlers call them “layers”, “rollups”, or “fragments”. This feature is called “code splitting”.
-
-## Server Rendering and Code Splitting
-
-Let's say you're requesting a page that needs to fetch a code chunk from the server before it's able to render. If you do all your rendering on the client side, you don't have to do anything special. However, if the page is rendered on the server, you'll find that React will spit out the following error:
-
-> Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
-
-> (client) `<!-- react-empty: 1 -`
-
-> (server) `<div data-reactroot="`
-
-Different markup is generated on the client than on the server. Why does this happen? When you register a component or Render-Function with `ReactOnRails.register`, React on Rails will by default render the component as soon as the page loads. However, code splitting requires that components render at a later time when the JavaScript chunks have loaded.
-
-## Solution
-
-To prevent this, you have to wait until the code chunk is fetched before doing the initial render on the client side. To accomplish this, React on Rails allows you to register a renderer. This works just like registering a Render-Function, except that the function you pass takes three arguments: `renderer(props, railsContext, domNodeId)`, and is responsible for calling `ReactDOM.render` or `ReactDOM.hydrate` to render the component to the DOM. React on rails will automatically detect when a Render-Function takes three arguments, and will **not** call `ReactDOM.render` or `ReactDOM.hydrate`, instead allowing you to control the initial render yourself. Note, you have to be careful to call `ReactDOM.hydrate` rather than `ReactDOM.render` if you are server rendering.
-
-## Server vs. Client Code Caveats
-
-If you're going to try to do code splitting with server rendered routes, you'll probably need to use separate route definitions for client and server to prevent code splitting from happening for the server bundle. The server bundle should be one file containing all the JavaScript code. This will require you to have separate Webpack configurations for client and server.
-
-Do not attempt to register a renderer function on the server. Instead, register either a Render-Function or a component. If you register a renderer in the server bundle, you'll get an error when React on Rails tries to server render the component.
-
-## React on Rails Pro
-
-[React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/) includes a complete setup using this technique for code splitting using
-[loadable-components.com](https://loadable-components.com/docs) with React on Rails.
diff --git a/docs/outdated/rails-assets-relative-paths.md b/docs/outdated/rails-assets-relative-paths.md
deleted file mode 100644
index 6c12ff3b51..0000000000
--- a/docs/outdated/rails-assets-relative-paths.md
+++ /dev/null
@@ -1,193 +0,0 @@
-_Note: this doc reflects using Sprockets for assets and has not been updated for Shakapacker or rails/webpacker_
-
-# Using Webpack bundled assets with the Rails Asset Pipeline
-
-**If you're looking to use assets in your React components, look no further. This doc is for you.**
-
-As most of you know, when you spin up a Rails application all of your asset files that live within your `app/assets/` directory will be added into your application's Asset Pipeline. If you would like to view any of these assets (most commonly you'd want to view images), run your Rails server in development mode and in a browser visit a url similar to: `localhost:3000/assets/sample_image.png`. In this case, if I had an image `sample_image.png` in my `app/assets/images/` directory, visiting the url `localhost:3000/assets/sample_image.png` in a browser would display the image to me. Meaning that `/assets/sample_image.png` is my path to that individual asset.
-
-## The Problem
-
-Sometimes we would like to use images directly in our React components or even component-specific CSS. This can cause problems because it is difficult to maintain the relative path to assets in our pipeline. Normally, we would use ERB to get around this, using something like `<img src="<%= asset_path('my-image.png') %>" />`. Unfortunately, that will not play well with Webpack.
-
-Now we could always just place these assets in our `app/assets/` directory like normal and then reference them in our React with things like `<img src="/assets/asset-name.ext" />`, and that would work! But that also will move this image out of our client-side app, which isn't always ideal. Also, hardcoding the path to an asset isn't a good approach considering file paths can always change, and that would then require a source code change. That's just no bueno.
-
-So how do we get around this? And find the relative paths to our assets without hardcoding the paths?
-
-## The Solution: The lowdown on Webpack's url-loader & file-loader, outputPaths and publicPaths
-
-Loaders are an incredibly useful part of Webpack. Simply put, they allow you to load and bundle different types of sources/files (you can load anything from images, CSS, to CoffeeScript).
-
-##### Url Loader vs. File Loader
-
-Two very common, and quite useful, Webpack loaders are the [url-loader](https://github.com/webpack-contrib/url-loader) and the [file-loader](https://github.com/webpack-contrib/file-loader). They allow you to load and access files in an easy manner. Both of these loaders are incredibly similar to one another, and in fact work together to accomplish their goals, with a very slight difference. The url-loader will load any file(s) and when accessed, will return a Data Url that can be used to access the file(s) (commonly used to inline images). File-loader on the other hand, will bundle and output the file(s) to a desired directory so they can live in the assets on your webserver along with your outputted Webpack bundle. These bundled assets can then be accessed by their public paths, making it very easy to include and use them in your JavaScript code.
-
-The url-loader is great to use for smaller images! It is most commonly used with a set byte limit on the size of the files that can be loaded. When this is the case, anything below the byte limit will be loaded and returned as a Data Url. Anything that exceeds the byte limit, will delegate to file-loader for loading, passing any set query parameters as well to file-loader (if that sounds like gibberish right now, don't worry. You'll learn all about it soon!).
-
-The benefit of using url-loader first, and falling back on file-loader, is that the use of Data Urls saves HTTP Requests that need to be made to fetch files. That is very important in regards to how fast a webpage will load. Generally speaking, the less HTTP requests that need to be made, the faster a page will load. For more information about usage, and the pros & cons of Data Urls read [here](https://css-tricks.com/data-uris/).
-
-Note: _For the rest of this doc, we will be using file-loader. This is because its usage can be a little bit trickier, and it is used as url-loader's back up. Keep in mind that the usage for the two is EXTREMELY similar. For more info about using url-loader, check out its configuration for the `react_on_rails` sample app [here](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/webpack.client.base.config.js) (specifically lines 82-84)._
-
-##### Configuring Webpack with file-loader
-
-Once you have added file-loader (or whatever loader you would like to use) to your project, you can start configuring your `webpack.config.js` file to bundle these assets. Inside your `module["loaders"]` list you will add a new object to represent your loader. This loader will include a few attributes:
-
-1. `test`: a regular expression that specifies the types of files that can be loaded.
-2. `loader`: the name of the loader you will be using (in this doc we will be using [file-loader](https://github.com/webpack-contrib/file-loader))
-3. `query`: query parameters are additional configuration options that get passed to the loader. This can either be appended to your `loader` attribute like follows:
-
-```javascript
-loader: 'file-loader?name=[name].[ext]',
-```
-
-or as a JSON object:
-
-```javascript
-query: {
-  name: '[name].[ext]',
-},
-```
-
-Both examples above do the exact same thing, just using different syntaxes. For the rest of this doc we will be using the JSON object style. For more information about Webpack loaders, read [this](https://webpack.js.org/concepts/loaders/).
-
-_For the sake of this doc, we're also going to add a `resolve["alias"]` inside our webpack.config to make it easier to include our assets in our jsx files. In `resolve["alias"]`, simply add:_
-
-```javascript
-'assets': path.resolve('./app/assets'),
-```
-
-##### Configuring your file-loader Query Parameters
-
-The first property we'll want to set is our file's resulting name after bundling. For now, we're just going to use:
-
-```javascript
-name: '[name][md5:hash].[ext]',
-```
-
-This will just set the name to the file's original name + an MD5-digested hash + the extension of the original file (.png, .jpg, etc.).
-
-Next we'll set the outputPath for our files. This is the directory we want the files to be placed in after Webpack runs. When Webpack runs with file-loader, all files (in this case assets) that have been used in the bundled JavaScript will be bundled and outputted to the output destination. **Keep in mind that react_on_rails outputs by default to the `app/assets/webpack/` directory so when we specify the outputPath here it will be relative the `app/assets/webpack` directory.** You can set the outputPath to whatever you want, in this example we will add it to a directory `/app/assets/webpack/webpack-assets/`, and here's how we would do that:
-
-```javascript
-outputPath: 'webpack-assets/',
-```
-
-Note: _You can output these files in the asset pipeline wherever you see fit. My preference is outputting somewhere inside the `app/assets/webpack/` directory just because anything in this directory is already ignored by git due to the react_on_rails generated gitignore, meaning they will not be added by Git twice! (once in your `client/app/assets/` and once in your outputted path after Webpack bundling)_
-
-Lastly, we will set the publicPath to our file(s). This will be the endpoint on our Rails web server that you can visit to reach the asset (if you don't know how this works, read the [intro](#using-webpack-bundled-assets-with-the-rails-asset-pipeline)). If you've been following the previous steps, you know that we set our outputPath for our assets to be absolute at `app/assets/webpack/webpack-assets/`, which your Rails app should end up hosting at `/assets/webpack-assets/file-name+hash.ext` when the server is run.
-
-Note: _If you're having a hard time figuring out what an asset's path will be on your Rails server, simply run `rake assets:precompile` and `cd public/`. The path from there to your file will then be the path/url on your web server to that asset. On top of this, it is also a good idea to check out [this doc](./rails-assets.md) to understand how `react_on_rails` allows us to access these files after precompilation, when Rails applies another hash onto the asset._
-
-Our publicPath setting will match the path to our outputted assets on our Rails web server. Given our assets in this example will be outputted to `/app/assets/webpack/webpack-assets/` and hosted at `/assets/webpack-assets/`, our publicPath would be:
-
-```javascript
-publicPath: '/assets/webpack-assets/',
-```
-
-Voila! Your Webpack setup is complete.
-
-##### Adding/Using `client/` Assets
-
-Now for the fun part, we actually get to use our client assets now. The first thing you'll want to do is create an assets directory inside your client directory. The best place for this directory is probably at `client/app/assets`. Put any assets you want in there, images, stylesheets, whatever. Now that the assets are in place, we can simply `import` or `require` them in our jsx files for use in our components. For example:
-
-```javascript
-// This uses the assets alias we created earlier to map to the client/app/assets/ directory followed by `images/my-image.png`
-import myImage from 'assets/images/my-image.png';
-
-export default class MyImageBox extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-  }
-
-  render() {
-    return <img src={myImage} />;
-  }
-}
-```
-
-`myImage` in the example above will resolve to the path of that asset on the web server. Therefore using it as an img's source would then properly display the image/assets when this React component is rendered.
-
-Note: **Any assets in our `client/` directory that are not imported/required for use in our JSX files will NOT be bundled and outputted by Webpack.**
-
-## Summary: Welcome people who are tired of reading
-
-If you've read this far, you probably have a grip on everything. If you didn't, and want a condensed version, here you go:
-
-- Add Webpack's file-loader to your project
-- Add a new loader module in your webpack.config.js file
-- Set this loader's test attribute to a regex of the file extensions you would like to load
-- Set the loader attribute to "file-loader"
-- Set name to something like `"[name][md5:hash].[ext]"`
-- Set outputPath attribute to directory of choice, relative to `app/assets/webpack` directory
-- Set publicPath attribute, this should be the same as where the Rails asset pipeline will serve your asset(s) on the server. See [this](#configuring-your-file-loader-query-parameters) for more info.
-- Add assets directory in `client/app/`, and place whatever you would like in there
-- Import or Require these files in your JSX and use them all you want!
-
-### Here's a full example of a webpack.config.js configured with file-loader to load images
-
-```javascript
-const webpack = require('webpack');
-const path = require('path');
-
-const devBuild = process.env.NODE_ENV !== 'production';
-const nodeEnv = devBuild ? 'development' : 'production';
-
-module.exports = {
-  entry: ['./app/bundles/HelloWorld/startup/registration'],
-
-  output: {
-    filename: 'hello-world-bundle.js',
-    path: '../app/assets/webpack',
-  },
-
-  resolve: {
-    extensions: ['', '.js', '.jsx'],
-    alias: {
-      assets: path.resolve('./app/assets'), // Makes it easier to reference our assets in jsx files
-      react: path.resolve('./node_modules/react'),
-      'react-dom': path.resolve('./node_modules/react-dom'),
-    },
-  },
-
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: JSON.stringify(nodeEnv),
-      },
-    }),
-  ],
-  module: {
-    rules: [
-      {
-        test: /\.jsx?$/,
-        loader: 'babel-loader',
-        exclude: /node_modules/,
-      },
-      {
-        test: require.resolve('react'),
-        use: {
-          loader: 'imports-loader',
-          options: {
-            shim: 'es5-shim/es5-shim',
-            sham: 'es5-shim/es5-sham',
-          },
-        },
-      },
-      {
-        // The important stuff
-        test: /\.(jpg|jpeg|png)(\?.*)?$/, // Load only .jpg .jpeg, and .png files
-        use: {
-          loader: 'file-loader',
-          options: {
-            name: '[name][md5:hash].[ext]', // Name of bundled asset
-            outputPath: 'webpack-assets/', // Output location for assets. Final: `app/assets/webpack/webpack-assets/`
-            publicPath: '/assets/webpack-assets/', // Endpoint asset can be found at on Rails server
-          },
-        },
-      },
-    ],
-  },
-};
-```
-
-If you'd like to understand how react_on_rails handles these bundled assets after asset precompilation and in production mode, check out: [Rails Assets](./rails-assets.md).
diff --git a/docs/outdated/rails-assets.md b/docs/outdated/rails-assets.md
deleted file mode 100644
index 4dfbef7b7b..0000000000
--- a/docs/outdated/rails-assets.md
+++ /dev/null
@@ -1,79 +0,0 @@
-# Rails assets and the Extract Text Plugin
-
-_This doc needs updating for the use of Shakapacker or rails/webpacker with React on Rails_
-
-The [Webpack file loader](https://github.com/webpack/file-loader) copies referenced files to
-the destination output directory, with an MD5 hash. The other term for this is a "digest".
-
-> By default, the filename of the resulting file is the MD5 hash of the file's contents with
-> the original extension of the required resource.
-
-The most common use cases for Webpack processed files are images used for backgrounds in
-CSS and fonts for CSS. However, this applies to any file that might be processed using the
-Webpack file loader.
-
-## The Problem
-
-To understand the problem, it helps to read this article:
-[What is fingerprinting and why should I care](http://guides.rubyonrails.org/asset_pipeline.html#what-is-fingerprinting-and-why-should-i-care-questionmark)
-Basically, when Rails prepares assets for production deployments, it also adds a digest
-to the file names. E.g., `img1.jpg` becomes `img1-dbu097452jf2v2.jpg`.
-
-When compiling its native css Rails transforms all urls and links to digested
-versions, i.e. `background-image: image-url(img1.jpg)` becomes
-`background-image: url(img1-dbu097452jf2v2.jpg)`. However, this doesn't happen for JS and
-CSS files compiled by Webpack on the client side, because they don't use
-`image-url` and `asset-url`. Without some fix, these assets would fail to load.
-
-When Webpack's client JavaScript uses images in render methods, e.g. `<img src='...' />` or
-in css, e.g. `background-image: url(...)` The code (such as the CSS) generated by the Webpack
-will have the Webpack digested name (MD5 hash). Since the Webpack generated CSS expects
-just one level of "digesting", this "double-digesting" from Rails will cause such assets
-to fail to load.
-
-_If you are interested in learning how to use assets in your React components, read this doc: [Webpack, the Asset Pipeline, and Using Assets w/ React](./rails-assets-relative-paths.md)_
-
-## The Solution: Symlink Original File Names to New File Names
-
-_Note, this solution was removed in v14. If you're interested in this symlink solution, please create
-a GitHub issue._
-
-## Example from /spec/dummy
-
-```
-cd spec/dummy
-RAILS_ENV=production bundle exec rake assets:precompile
-rails s -e production
-```
-
-You will see this. This shows how the file names output by Rails. Note the original names after
-being processed by Webpack are just MD5's.
-
-```
-I, [2016-07-17T23:46:56.301981 #77382]  INFO -- : Writing /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/server-bundle-42935dea382802a27e91b7df444a2813f74b4e6a0fce5606d863aaa10c0623d7.js
-I, [2016-07-17T23:46:56.305649 #77382]  INFO -- : Writing /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/server-bundle-42935dea382802a27e91b7df444a2813f74b4e6a0fce5606d863aaa10c0623d7.js.gz
-I, [2016-07-17T23:46:56.370390 #77382]  INFO -- : Writing /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/application_static-dfa728160c3cdebc633c2f6fb3823411530b307044f4dfe460790eef00b4e421.js
-I, [2016-07-17T23:46:56.370566 #77382]  INFO -- : Writing /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/application_static-dfa728160c3cdebc633c2f6fb3823411530b307044f4dfe460790eef00b4e421.js.gz
-I, [2016-07-17T23:46:56.372895 #77382]  INFO -- : Writing /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/application_static-17ed778d5061d4797556632b7bfbf405e067d9e7f140060a7f56a09788251f16.css
-I, [2016-07-17T23:46:56.373012 #77382]  INFO -- : Writing /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/application_static-17ed778d5061d4797556632b7bfbf405e067d9e7f140060a7f56a09788251f16.css.gz
-I, [2016-07-17T23:46:56.374531 #77382]  INFO -- : Writing /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/2ac2dd94f9b7e54292f6d051f1e4e756-ab14eebb171a9a5c9bfdeb2f88933d2dc4904ea8bb09444984e52b13d230e251.svg
-I, [2016-07-17T23:46:56.374818 #77382]  INFO -- : Writing /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/2ac2dd94f9b7e54292f6d051f1e4e756-ab14eebb171a9a5c9bfdeb2f88933d2dc4904ea8bb09444984e52b13d230e251.svg.gz
-I, [2016-07-17T23:46:56.392207 #77382]  INFO -- : Writing /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/5cf5db49df178f9357603f945752a1ef-033650e1d6193b70d59bb60e773f47b6d9aefdd56abc7ccdba3c7bed4e57ccad.png
-I, [2016-07-17T23:46:56.393208 #77382]  INFO -- : Writing /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/8970f5e1e92aea933b502a2d73976b76-877bde3739dc7080c3fb00ee9012db6f21ed0dbbf11cd596dbb6e1a35bfb71f9.png
-I, [2016-07-17T23:46:56.395490 #77382]  INFO -- : Writing /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/ecb4572a5e478b107dfcb60c16a7eefa-6d1ab3741d5a164dc2aab48bb74429aebe2e2e29606feca581081697624dc18c.ttf
-I, [2016-07-17T23:46:56.395846 #77382]  INFO -- : Writing /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/ecb4572a5e478b107dfcb60c16a7eefa-6d1ab3741d5a164dc2aab48bb74429aebe2e2e29606feca581081697624dc18c.ttf.gz
-I, [2016-07-17T23:46:56.396979 #77382]  INFO -- : Writing /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/fbd0d00cc9b670f05c17893a40da08d0-5731789fd0d7847a582b52b55a83e7a0ad4684acd5a9b487557635a08c112d0e.svg
-I, [2016-07-17T23:46:56.397669 #77382]  INFO -- : Writing /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/fbd0d00cc9b670f05c17893a40da08d0-5731789fd0d7847a582b52b55a83e7a0ad4684acd5a9b487557635a08c112d0e.svg.gz
-I, [2016-07-17T23:46:56.399261 #77382]  INFO -- : Writing /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/fc2dcaaf2057331ff76c5d37e1aa7056-efba50c701b697fc8160603b9e876adcf47511f35af68701db285272c965a45f.svg
-I, [2016-07-17T23:46:56.399660 #77382]  INFO -- : Writing /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/fc2dcaaf2057331ff76c5d37e1aa7056-efba50c701b697fc8160603b9e876adcf47511f35af68701db285272c965a45f.svg.gz
-React On Rails: Symlinking /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/2ac2dd94f9b7e54292f6d051f1e4e756-ab14eebb171a9a5c9bfdeb2f88933d2dc4904ea8bb09444984e52b13d230e251.svg to /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/2ac2dd94f9b7e54292f6d051f1e4e756.svg
-React On Rails: Symlinking /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/2ac2dd94f9b7e54292f6d051f1e4e756-ab14eebb171a9a5c9bfdeb2f88933d2dc4904ea8bb09444984e52b13d230e251.svg.gz to /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/2ac2dd94f9b7e54292f6d051f1e4e756.svg.gz
-React On Rails: Symlinking /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/5cf5db49df178f9357603f945752a1ef-033650e1d6193b70d59bb60e773f47b6d9aefdd56abc7ccdba3c7bed4e57ccad.png to /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/5cf5db49df178f9357603f945752a1ef.png
-React On Rails: Symlinking /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/8970f5e1e92aea933b502a2d73976b76-877bde3739dc7080c3fb00ee9012db6f21ed0dbbf11cd596dbb6e1a35bfb71f9.png to /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/8970f5e1e92aea933b502a2d73976b76.png
-React On Rails: Symlinking /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/ecb4572a5e478b107dfcb60c16a7eefa-6d1ab3741d5a164dc2aab48bb74429aebe2e2e29606feca581081697624dc18c.ttf to /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/ecb4572a5e478b107dfcb60c16a7eefa.ttf
-React On Rails: Symlinking /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/ecb4572a5e478b107dfcb60c16a7eefa-6d1ab3741d5a164dc2aab48bb74429aebe2e2e29606feca581081697624dc18c.ttf.gz to /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/ecb4572a5e478b107dfcb60c16a7eefa.ttf.gz
-React On Rails: Symlinking /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/fbd0d00cc9b670f05c17893a40da08d0-5731789fd0d7847a582b52b55a83e7a0ad4684acd5a9b487557635a08c112d0e.svg to /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/fbd0d00cc9b670f05c17893a40da08d0.svg
-React On Rails: Symlinking /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/fbd0d00cc9b670f05c17893a40da08d0-5731789fd0d7847a582b52b55a83e7a0ad4684acd5a9b487557635a08c112d0e.svg.gz to /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/fbd0d00cc9b670f05c17893a40da08d0.svg.gz
-React On Rails: Symlinking /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/fc2dcaaf2057331ff76c5d37e1aa7056-efba50c701b697fc8160603b9e876adcf47511f35af68701db285272c965a45f.svg to /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/fc2dcaaf2057331ff76c5d37e1aa7056.svg
-React On Rails: Symlinking /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/fc2dcaaf2057331ff76c5d37e1aa7056-efba50c701b697fc8160603b9e876adcf47511f35af68701db285272c965a45f.svg.gz to /Users/justin/shakacode/react_on_rails/spec/dummy/public/assets/fc2dcaaf2057331ff76c5d37e1aa7056.svg
-```
diff --git a/docs/outdated/rails3.md b/docs/outdated/rails3.md
deleted file mode 100644
index 7d330bd5ec..0000000000
--- a/docs/outdated/rails3.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# Rails 3
-
-- Please let us know if you find any issues with Rails 3.
-- Rails 3 is confirmed to work up with versions up to 6.8.x.
-- We are not testing it for new releases. If you find an issue, you will have to submit a PR to get it fixed.
-
-## Known Issues
-
-1. If you do not skip bootstrap for the generator, you cannot generate a working app, as bootstrap-sass does not support Rails 3, or at least the version we're using.
diff --git a/docs/outdated/tips-for-usage-with-sp6.md b/docs/outdated/tips-for-usage-with-sp6.md
deleted file mode 100644
index 290f4fcfa1..0000000000
--- a/docs/outdated/tips-for-usage-with-sp6.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Tips for usage with Shakapacker 6
-
-As mentioned earlier in the documentation, we assume you install ReactOnRails in a project with Shakapacker 7+ installed and configured. If you still use Shakapacker 6, we encourage you to check the upgrade to the version 7 guide. Otherwise, you need to consider the following:
-
-1. The install generator tries to take the necessary steps to adapt the installed files to match the file structure and configurations for Shakapacker 6. So you don't need to be worried about the ReactOnRails installation process.
-
-2. Check the following table to map the references in the documentation to the relevant ones in Shakapacker 6:
-
-| Usage in Shakapacker 7       | Equivalent in Shakapacker 6 |
-| ---------------------------- | --------------------------- |
-| `config/shakapacker.yml`     | `config/webpacker.yml`      |
-| `bin/shakapacker`            | `bin/webpacker`             |
-| `bin/shakapacker-dev-server` | `bin/webpacker-dev-server`  |
-
-3. Any environment variables starting with `SHAKAPACKER_*` should be changed to `WEBPACKER_*`.
diff --git a/docs/outdated/upgrade-webpacker-v3-to-v4.md b/docs/outdated/upgrade-webpacker-v3-to-v4.md
deleted file mode 100644
index e0ceb6c875..0000000000
--- a/docs/outdated/upgrade-webpacker-v3-to-v4.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Upgrading rails/webpacker v3.5 to v4 (Outdated)
-
-_Note: This guide is outdated. The configuration files it references were removed when React on Rails moved to Shakapacker. For migrating from Webpacker to Shakapacker, see the Shakapacker guide to upgrading to [version 6](https://github.com/shakacode/shakapacker/blob/master/docs/v6_upgrade.md) and [version 7](https://github.com/shakacode/shakapacker/blob/master/docs/v7_upgrade.md)._
-
-The following steps can be followed to update a Webpacker v3.5 app to v4.
-
-1. Update the gem `webpacker` and the package `@rails/webpacker`
-1. Merge changes from the new default `.babelrc` to your `/.babelrc`. If you are using React, you need to add `"@babel/preset-react"`, to the list of `presets`.
-1. Copy the file `.browserslistrc` to `/`.
-1. Merge any differences between `config/webpacker.yml` and your `/config/webpacker.yml`.
-
-Here is an [example commit of these changes](https://github.com/shakacode/react_on_rails-tutorial-v11/pull/1/files).
diff --git a/docs/outdated/webpack-v1-notes.md b/docs/outdated/webpack-v1-notes.md
deleted file mode 100644
index 3f6907048f..0000000000
--- a/docs/outdated/webpack-v1-notes.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# Webpack V1 Tips
-
-The following only apply to Webpack V1. Take 1 hour and update to v2! It's worth it!
-
-## Use the `--bail` Option When Running Webpack for CI or Deployments if using Webpack V1
-
-For your scripts that statically build your Webpack bundles, use the `--bail` option. This will ensure that CI and your product deployment **halt** if Webpack cannot complete. For more details, see the documentation for [Webpack's `--bail` option](https://webpack.js.org/configuration/other-options/#bail). Note, you might not want to use the `--bail` option if you want to see all the errors, rather than only the first error. Then make sure to check the Webpack exit code.
-
-## Entry Points
-
-You should ensure you configure the entry points correctly for Webpack if you want to break out libraries into a "vendor" bundle where your libraries are packaged separately from your app's code. If you send web clients your vendor bundle separately from your app bundles, then web clients might have the vendor bundle cached while they receive updates for your app.
-
-You need both include `react-dom` and `react` as values for `entry`, like this:
-
-```
-  entry: {
-
-    // See use of 'vendor' in the CommonsChunkPlugin inclusion below.
-    vendor: [
-      'babel-core/polyfill',
-      'react',
-      'react-dom',
-    ],
-```
diff --git a/docs/outdated/webpack.md b/docs/outdated/webpack.md
deleted file mode 100644
index 496dfc58b5..0000000000
--- a/docs/outdated/webpack.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# Webpack Tips
-
-## Where can I learn about advanced Webpack setups, including e.g. "CSS Modules", "Code Splitting", etc.?
-
-You can try our example app, [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial). We're building comprehensive production examples in our new, premium product, [**React on Rails Pro**](https://forum.shakacode.com/t/introducing-react-on-rails-pro-subscriptions/785). If you're interested, please see the details in [this forum post](https://forum.shakacode.com/t/introducing-react-on-rails-pro-subscriptions/785).
-
-## yarn or npm?
-
-Yarn v1 is our current recommendation!
-
-## Entry Points
-
-You should ensure you configure the entry points correctly for Webpack if you want to break out libraries into a "vendor" bundle where your libraries are packaged separately from your app's code. If you send web clients your vendor bundle separately from your app bundles, then web clients might have the vendor bundle cached while they receive updates for your app.
-
-Webpack v2 makes this very convenient! See:
-
-- [Implicit Common Vendor Chunk](https://webpack.js.org/guides/code-splitting-libraries/#implicit-common-vendor-chunk)
-- [Manifest File](https://webpack.js.org/guides/code-splitting-libraries/#manifest-file)
-
-## Webpack v5
-
-Webpack v5 is highly recommended. See [the release post](https://webpack.js.org/blog/2020-10-10-webpack-5-release/) and [the official migration documentation](https://webpack.js.org/migrate/5/).
-
-If you need help with migrating your project to Webpack v5, please contact Justin Gordon at [justin@shakacode.com](mailto:justin@shakacode.com).
diff --git a/docs/planning/docs-improvement/04-ia-redesign-plan.md b/docs/planning/docs-improvement/04-ia-redesign-plan.md
index 426d749019..d138238bd2 100644
--- a/docs/planning/docs-improvement/04-ia-redesign-plan.md
+++ b/docs/planning/docs-improvement/04-ia-redesign-plan.md
@@ -796,9 +796,11 @@ echo "✅ Files reorganized. Review changes before committing."
 
 ### Phase 3: Content Updates (react_on_rails repo)
 
+**STATUS:** ✅ COMPLETED (with adaptations) - See ia-redesign-live.md for details
+
 **Create new files:**
 
-**1. `docs/introduction.md`**
+**1. `docs/introduction.md`** ✅ DONE
 
 - Homepage for docs
 - Explains what React on Rails is
@@ -806,49 +808,56 @@ echo "✅ Files reorganized. Review changes before committing."
 - Links to three paths (Quick Start, Installation, Tutorial)
 - Philosophy section
 
-**2. Split `docs/getting-started.md`:**
+**2. Split `docs/getting-started.md`:** ✅ DONE (but transformed, not split)
+
+- **PLANNED:** Move installation → `docs/getting-started/installation.md`
+- **ACTUAL:** Transformed to `docs/getting-started/using-react-on-rails.md` (conceptual guide)
+- **REASON:** installation.md already existed, needed conceptual guide instead
+- DELETE original after content extracted ✅ DONE
 
-- Move installation → `docs/getting-started/installation.md`
-- Move concepts → Core Concepts category
-- Move API examples → API Reference
-- DELETE original after content extracted
+**3. Update `docs/README.md`:** ✅ DONE (kept simplified)
 
-**3. Update `docs/README.md`:**
-Option A: Delete entirely (introduction.md is new homepage)
-Option B: Keep as simple TOC without learning paths
+- **DECIDED:** Option B (kept as simple TOC)
+- Reduced from 173 → 65 lines
+- Serves GitHub users browsing repo
 
-**4. Delete `docs/home.md`:**
+**4. Delete `docs/home.md`:** ✅ DONE
 
 - Redundant with introduction.md
 
-**5. Update cross-references:**
+**ADDITIONS (discovered during implementation):**
 
-- Search all docs for links to moved files
-- Update relative paths
-- Automated script:
+**5. Tutorial improvements** ✅ DONE
 
-```bash
-#!/bin/bash
-# Update internal links after reorganization
-
-# Find all .md files
-find docs -name "*.md" -type f | while read file; do
-  # Replace old paths with new paths
-  sed -i 's|guides/installation-into-an-existing-rails-app.md|getting-started/installation.md|g' "$file"
-  sed -i 's|guides/tutorial.md|getting-started/tutorial.md|g' "$file"
-  sed -i 's|guides/how-react-on-rails-works.md|core-concepts/how-it-works.md|g' "$file"
-  # ... etc for all moved files
-done
-```
+- Extracted Heroku deployment (139 lines) to dedicated guide
+- Fixed outdated versions (Ruby 3.0+, Rails 7+, RoR v16)
+- Clarified Redux vs Hooks usage
+- Merged duplicate HMR sections
+- Reorganized "Other features" → "Going Further"
+
+**6. Delete `manual-installation-overview.md`** ✅ DONE
+
+- Outdated since 2018
+- Confused purpose
+- No clear use case (generator IS manual installation)
+
+**7. Update cross-references:** ✅ DONE (manually)
+
+- Updated links to renamed/moved files as they were discovered
+- Key changes:
+  - overview.md → introduction.md (2 links)
+  - understanding-react-on-rails.md → using-react-on-rails.md (1 link)
+  - manual-installation-overview.md link removed (1 link)
+- **NOTE:** Did not use automated script - manual updates were more appropriate given incremental changes
 
 **Testing checklist:**
 
-- [ ] All new files created
-- [ ] Old files deleted or split
-- [ ] All internal links updated
-- [ ] Run markdown link checker
-- [ ] Manual spot-checks of navigation
-- [ ] Test on local gatsby build
+- [x] All new files created
+- [x] Old files deleted or transformed
+- [x] All internal links updated (manually as encountered)
+- [ ] Run markdown link checker (TODO: before final merge)
+- [x] Manual spot-checks of navigation
+- [ ] Test on local gatsby build (deferred to Phase 1 - website config)
 
 ---
 
diff --git a/docs/planning/docs-improvement/ia-redesign-live.md b/docs/planning/docs-improvement/ia-redesign-live.md
index bc4e2392e9..69637b7b22 100644
--- a/docs/planning/docs-improvement/ia-redesign-live.md
+++ b/docs/planning/docs-improvement/ia-redesign-live.md
@@ -321,7 +321,79 @@ After Steps 1-8, found 12 files not in original plan. Investigated and reorganiz
 
 **Total files moved:** ~50+ files across all steps
 
-**Next Actions:** Update website config, update internal links, create introduction.md
+---
+
+## Phase 3: Entry Point Consolidation (Oct 7, 2025)
+
+**Branch:** `feature/docs-ia-redesign-1845-continue` (continuing from merged PR #1845)
+
+### Actions Completed:
+
+1. **✅ Deleted orphaned `docs/guides/advanced/README.md`**
+
+   - Navigation index left behind after reorganization
+   - Linked to files now in core-concepts/
+   - Redundant, deleted
+
+2. **✅ Created `docs/introduction.md`** - New unified homepage
+
+   - Explains what React on Rails is and why use it
+   - When to use / when not to use decision guide
+   - Three clear paths: Quick Start, Installation, Tutorial
+   - Popular use cases quick reference table
+   - Core concepts links
+   - Philosophy section linking to doctrine
+   - Help and support section
+   - Added community stat (thousands of production sites)
+   - Added all 3 example repos (spec/dummy, demo SSR/HMR, reactrails.com)
+   - System requirements from actual docs
+   - Built from: overview.md, doctrine.md, README.md structure
+
+3. **✅ Deleted `docs/core-concepts/react-on-rails-overview.md`**
+
+   - Content consolidated into introduction.md
+   - Outdated prerequisites (Rails >=5 vs current Rails 7+)
+   - Created confusion with two similar entry points
+   - Updated 2 links: home.md and doctrine.md
+
+4. **✅ Simplified `docs/README.md`** for GitHub users
+
+   - Reduced from 173 lines to 65 lines
+   - Directs to website first
+   - Kept valuable learning paths from PR #1813
+   - Kept popular use cases table
+   - Added documentation categories overview
+   - Removed duplicate content (now in introduction.md)
+   - Purpose: Serves GitHub users browsing repo, not website visitors
+
+5. **✅ Deleted `docs/home.md`**
+
+   - Was the current website homepage (29 lines of links)
+   - Replaced by introduction.md
+   - All valuable content already in introduction.md or README.md
+   - No unique content lost
+
+6. **✅ Transformed `docs/getting-started.md` → `docs/getting-started/using-react-on-rails.md`**
+
+   - Reduced from 253 to 238 lines (still comprehensive but focused)
+   - Removed: Choose Starting Point (redundant), System Requirements (duplicate), More Reading (navigation)
+   - Transformed installation section to conceptual overview with links
+
+7. **✅ Deleted `docs/advanced-topics/manual-installation-overview.md`**
+   - Outdated since 2018 (had "TODO: Review this file" for 7 years)
+   - Confused purpose: title said "Manual Installation" but subtitle said "summarizes what generator does"
+   - Outdated content: referenced `/client`, `webpacker`, missing auto-bundling
+   - No clear use case: generator IS the manual installation (not external CLI)
+   - Content better covered in: how-react-on-rails-works.md, using-react-on-rails.md
+   - Removed link from installation-into-an-existing-rails-app.md
+   - Decision discussed with team in Slack
+   - Deleted original `docs/getting-started.md`
+
+**Remaining Entry Point Tasks:**
+
+- Update website config (sc-website gatsby-node.js) to use introduction.md as homepage
+
+**Next Actions:** Update website config when ready (keeping for last as user requested)
 
 ---
 
@@ -329,15 +401,16 @@ After Steps 1-8, found 12 files not in original plan. Investigated and reorganiz
 
 ```
 docs/
-├── introduction.md              # TODO: Create in next phase
-├── getting-started/ (4 files)
+├── introduction.md              # ✅ Created - new unified homepage
+├── README.md                    # ✅ Simplified for GitHub users
+├── getting-started/ (5 files)
+│   ├── using-react-on-rails.md  # ✅ NEW - Transformed from getting-started.md
 │   ├── quick-start.md
 │   ├── installation-into-an-existing-rails-app.md
 │   ├── tutorial.md
 │   └── project-structure.md
-├── core-concepts/ (8 files)
+├── core-concepts/ (7 files)
 │   ├── how-react-on-rails-works.md
-│   ├── react-on-rails-overview.md
 │   ├── client-vs-server-rendering.md
 │   ├── react-server-rendering.md
 │   ├── render-functions-and-railscontext.md
@@ -356,7 +429,7 @@ docs/
 │   ├── react-and-redux.md
 │   ├── react-helmet.md
 │   ├── rails-webpacker-react-integration-options.md
-│   ├── code-splitting.md
+│   ├── code-splitting.md                      # Moved to outdated/ (marked outdated)
 │   ├── images.md
 │   ├── foreman-issues.md
 │   └── turbolinks.md                          # Step 5 correction: from deployment
@@ -400,9 +473,8 @@ docs/
 │   ├── doctrine.md
 │   ├── style.md
 │   └── tips.md
-└── advanced-topics/ (2 files - KEEPING as category)
-    ├── rails-engine-integration.md            # Step 5 correction: from deployment
-    └── manual-installation-overview.md        # Orphaned: manual setup guide
+└── advanced-topics/ (1 file - KEEPING as category)
+    └── rails-engine-integration.md            # Step 5 correction: from deployment
 ```
 
 **Final Decisions:**
diff --git a/docs/pro/react-on-rails-pro.md b/docs/pro/react-on-rails-pro.md
index 151cef57a8..1c4297f058 100644
--- a/docs/pro/react-on-rails-pro.md
+++ b/docs/pro/react-on-rails-pro.md
@@ -1,4 +1,4 @@
-## React on Rails Pro
+# React on Rails Pro
 
 Support React on Rails development [by becoming a Github sponsor](https://github.com/sponsors/shakacode) and get these benefits:
 
diff --git a/lib/react_on_rails/dev/process_manager.rb b/lib/react_on_rails/dev/process_manager.rb
index 7ecae3996c..f737be16f9 100644
--- a/lib/react_on_rails/dev/process_manager.rb
+++ b/lib/react_on_rails/dev/process_manager.rb
@@ -147,7 +147,7 @@ def show_process_manager_installation_help
             DO NOT add foreman to your Gemfile. Install it globally on your system.
 
             For more information about why foreman should not be in your Gemfile, see:
-            https://github.com/shakacode/react_on_rails/blob/master/docs/javascript/foreman-issues.md
+            https://github.com/ddollar/foreman/wiki/Don't-Bundle-Foreman
 
             After installation, try running this script again.
             ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
diff --git a/spec/dummy/client/app/components/RouterLayout.jsx b/spec/dummy/client/app/components/RouterLayout.jsx
index 13c3a122a0..2ff566b50f 100644
--- a/spec/dummy/client/app/components/RouterLayout.jsx
+++ b/spec/dummy/client/app/components/RouterLayout.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link, Route, Switch } from 'react-router-dom';
+import { Link, Route, Routes } from 'react-router-dom';
 import RouterFirstPage from './RouterFirstPage';
 import RouterSecondPage from './RouterSecondPage';
 
@@ -21,10 +21,10 @@ const RouterLayout = () => (
       </li>
     </ul>
     <hr />
-    <Switch>
-      <Route path="/react_router/first_page" component={RouterFirstPage} />
-      <Route path="/react_router/second_page" component={RouterSecondPage} />
-    </Switch>
+    <Routes>
+      <Route path="first_page" element={<RouterFirstPage />} />
+      <Route path="second_page" element={<RouterSecondPage />} />
+    </Routes>
   </div>
 );
 
diff --git a/spec/dummy/client/app/routes/routes.jsx b/spec/dummy/client/app/routes/routes.jsx
index 9a9ce37419..d825dd988b 100644
--- a/spec/dummy/client/app/routes/routes.jsx
+++ b/spec/dummy/client/app/routes/routes.jsx
@@ -1,6 +1,10 @@
 import React from 'react';
-import { Route } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
 
 import RouterLayout from '../components/RouterLayout';
 
-export default <Route path="/react_router" component={RouterLayout} />;
+export default (
+  <Routes>
+    <Route path="/react_router/*" element={<RouterLayout />} />
+  </Routes>
+);
diff --git a/spec/dummy/client/app/startup/RouterApp.client.jsx b/spec/dummy/client/app/startup/RouterApp.client.jsx
index 9c5ad744bd..dd708538d5 100644
--- a/spec/dummy/client/app/startup/RouterApp.client.jsx
+++ b/spec/dummy/client/app/startup/RouterApp.client.jsx
@@ -2,4 +2,14 @@ import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import routes from '../routes/routes';
 
-export default (props) => <BrowserRouter {...props}>{routes}</BrowserRouter>;
+export default (props) => (
+  <BrowserRouter
+    {...props}
+    future={{
+      v7_startTransition: true,
+      v7_relativeSplatPath: true,
+    }}
+  >
+    {routes}
+  </BrowserRouter>
+);
diff --git a/spec/dummy/client/app/startup/RouterApp.server.jsx b/spec/dummy/client/app/startup/RouterApp.server.jsx
index 2995b42c25..d4c8675899 100644
--- a/spec/dummy/client/app/startup/RouterApp.server.jsx
+++ b/spec/dummy/client/app/startup/RouterApp.server.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StaticRouter } from 'react-router-dom';
+import { StaticRouter } from 'react-router-dom/server';
 
 import routes from '../routes/routes';
 
diff --git a/spec/dummy/package.json b/spec/dummy/package.json
index d21f58cf0d..86550eade3 100644
--- a/spec/dummy/package.json
+++ b/spec/dummy/package.json
@@ -23,7 +23,7 @@
     "react-helmet": "^6.1.0",
     "react-on-rails": "link:.yalc/react-on-rails",
     "react-redux": "^8.0.2",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.0.0",
     "redux": "^4.0.1",
     "redux-thunk": "^2.2.0",
     "regenerator-runtime": "^0.13.4"
diff --git a/spec/dummy/yarn.lock b/spec/dummy/yarn.lock
index a7970829a6..7e26a59417 100644
--- a/spec/dummy/yarn.lock
+++ b/spec/dummy/yarn.lock
@@ -1008,7 +1008,7 @@
     "@babel/plugin-transform-react-jsx-source" "^7.10.4"
     "@babel/plugin-transform-react-pure-annotations" "^7.10.4"
 
-"@babel/runtime@7.17.9", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.8.4":
+"@babel/runtime@7.17.9", "@babel/runtime@^7.12.1", "@babel/runtime@^7.8.4":
   version "7.17.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
   integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
@@ -1333,6 +1333,11 @@
   resolved "https://registry.yarnpkg.com/@rails/actioncable/-/actioncable-7.2.0.tgz#dee66d21bc125a9819dc8080ce896eac78d8c63f"
   integrity sha512-crcsPF3skrqJkFZLxesZoyUEt8ol25XtTuOAUMdLa5qQKWTZpL8eLVW71bDCwKDQLbV2z5sBZ/XGEC0i+ZZa+A==
 
+"@remix-run/router@1.23.0":
+  version "1.23.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.23.0.tgz#35390d0e7779626c026b11376da6789eb8389242"
+  integrity sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==
+
 "@rescript/react@^0.13.0":
   version "0.13.0"
   resolved "https://registry.yarnpkg.com/@rescript/react/-/react-0.13.0.tgz#0dcc8792415e6d2cd9273002e227dc5fa537f5d8"
@@ -3443,18 +3448,6 @@ hasown@^2.0.2:
   dependencies:
     function-bind "^1.1.2"
 
-history@^4.9.0:
-  version "4.10.1"
-  resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
-  integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-    loose-envify "^1.2.0"
-    resolve-pathname "^3.0.0"
-    tiny-invariant "^1.0.2"
-    tiny-warning "^1.0.0"
-    value-equal "^1.0.1"
-
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -3464,7 +3457,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -3799,11 +3792,6 @@ is-wsl@^2.2.0:
   dependencies:
     is-docker "^2.0.0"
 
-isarray@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
-  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
-
 isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -4420,7 +4408,7 @@ lodash@^4.17.19, lodash@^4.17.4:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
 
-loose-envify@^1.0.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -4568,14 +4556,6 @@ mimic-fn@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
-mini-create-react-context@^0.4.0:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz#072171561bfdc922da08a60c2197a497cc2d1d5e"
-  integrity sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==
-  dependencies:
-    "@babel/runtime" "^7.12.1"
-    tiny-warning "^1.0.3"
-
 mini-css-extract-plugin@^2.4.4:
   version "2.9.2"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.9.2.tgz#966031b468917a5446f4c24a80854b2947503c5b"
@@ -4959,13 +4939,6 @@ path-to-regexp@0.1.7:
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
   integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
 
-path-to-regexp@^1.7.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
-  integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
-  dependencies:
-    isarray "0.0.1"
-
 pbkdf2@^3.0.3:
   version "3.0.17"
   resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.17.tgz#976c206530617b14ebb32114239f7b09336e93a6"
@@ -5098,7 +5071,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -5216,7 +5189,7 @@ react-helmet@^6.1.0:
     react-fast-compare "^3.1.1"
     react-side-effect "^2.1.0"
 
-react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
+react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -5247,34 +5220,20 @@ react-refresh@^0.11.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
-react-router-dom@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"
-  integrity sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==
+react-router-dom@^6.0.0:
+  version "6.30.1"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.30.1.tgz#da2580c272ddb61325e435478566be9563a4a237"
+  integrity sha512-llKsgOkZdbPU1Eg3zK8lCn+sjD9wMRZZPuzmdWWX5SUs8OFkN5HnFVC0u5KMeMaC9aoancFI/KoLuKPqN+hxHw==
   dependencies:
-    "@babel/runtime" "^7.1.2"
-    history "^4.9.0"
-    loose-envify "^1.3.1"
-    prop-types "^15.6.2"
-    react-router "5.2.0"
-    tiny-invariant "^1.0.2"
-    tiny-warning "^1.0.0"
+    "@remix-run/router" "1.23.0"
+    react-router "6.30.1"
 
-react-router@5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293"
-  integrity sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==
+react-router@6.30.1:
+  version "6.30.1"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.30.1.tgz#ecb3b883c9ba6dbf5d319ddbc996747f4ab9f4c3"
+  integrity sha512-X1m21aEmxGXqENEPG3T6u0Th7g0aS4ZmoNynhbs+Cn+q+QGTLt+d5IQ2bHAXKzKcxGJjxACpVbnYQSCRcfxHlQ==
   dependencies:
-    "@babel/runtime" "^7.1.2"
-    history "^4.9.0"
-    hoist-non-react-statics "^3.1.0"
-    loose-envify "^1.3.1"
-    mini-create-react-context "^0.4.0"
-    path-to-regexp "^1.7.0"
-    prop-types "^15.6.2"
-    react-is "^16.6.0"
-    tiny-invariant "^1.0.2"
-    tiny-warning "^1.0.0"
+    "@remix-run/router" "1.23.0"
 
 react-side-effect@^2.1.0:
   version "2.1.0"
@@ -5448,11 +5407,6 @@ resolve-from@^5.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
-resolve-pathname@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
-  integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
-
 resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@@ -6058,16 +6012,6 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
-tiny-invariant@^1.0.2:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
-  integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
-
-tiny-warning@^1.0.0, tiny-warning@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
-  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
-
 tmpl@1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
@@ -6279,11 +6223,6 @@ v8-to-istanbul@^9.0.1:
     "@types/istanbul-lib-coverage" "^2.0.1"
     convert-source-map "^2.0.0"
 
-value-equal@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
-  integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
-
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
diff --git a/spec/react_on_rails/dev/process_manager_spec.rb b/spec/react_on_rails/dev/process_manager_spec.rb
index eda46a8352..581fc59476 100644
--- a/spec/react_on_rails/dev/process_manager_spec.rb
+++ b/spec/react_on_rails/dev/process_manager_spec.rb
@@ -234,7 +234,7 @@
       expect { described_class.send(:show_process_manager_installation_help) }
         .to output(/DO NOT add foreman to your Gemfile/).to_stderr
       expect { described_class.send(:show_process_manager_installation_help) }
-        .to output(/foreman-issues\.md/).to_stderr
+        .to output(/Don't-Bundle-Foreman/).to_stderr
     end
   end
 end