React site in a sub-folder (on Forge)

Level 58

Yes, it is possible to add a Next.js site to a subfolder in Laravel Forge. Here's how you can do it:

First, make sure you have Next.js installed in your Laravel project. You can do this by running the following command in your project's root directory:

npm install next

Create a new folder in your Laravel project's public directory. Let's call it docs.
Inside the docs folder, create a new file called index.js with the following content:

import { render } from 'react-dom';

const Docs = () => {
  return <h1>Welcome to the documentation site!</h1>;
};

render(<Docs />, document.getElementById('root'));

In your Laravel project's routes/web.php file, add the following route:

Route::get('/docs/{path?}', function () {
    return view('docs');
})->where('path', '.*');

Create a new file called docs.blade.php in your Laravel project's resources/views directory with the following content:

<!DOCTYPE html>
<html>
<head>
    <title>Documentation</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
    <div id="root"></div>
    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

In your Laravel project's webpack.mix.js file, add the following code:

mix.react('public/docs/index.js', 'public/js/app.js')
   .sass('resources/sass/app.scss', 'public/css/app.css');

Run the following command to compile your assets:

npm run dev

Finally, you can access your Next.js documentation site at site.mydomain.com/docs.

Note: This solution assumes that you have already set up Laravel Forge and have a working Laravel project.