Skip to main content

PageBuilder: Frontend - Next.js

  • Copy the nextjs-folder into / of your project structure.

  • Edit the values in the /nextjs/.env file.

  • Navigate to the /nextjs folder and run the following npm commands in the command line tool.

    npm install

    # (optional) this step is only required if you want to modify the project and develop locally:
    npm run dev

    ❗ Make sure to edit the values in the nextjs/.env-File before building/starting.

    # if you want to build and run in production mode:
    npm run build
    npm run start

  • After that, the server should be reachable with any browser at http://127.0.0.1:3000.

💡 Use http://127.0.0.1:3000 instead of http://localhost:3000 while developing locally. This is necessary to ensure the cookie domain works correctly.

💡 With both services up and running you should test your setup by logging in with your Strapi Admin credentials on each services login mask.
Next.js: nextjs:3000/cms/login
Strapi: strapi:1337/admin

💡 If the backend service is not running, the root page (http://127.0.0.1:3000) and all other pages except the login page will result in a 404 error page.

After the succesful installation of the PageBuilder: Frontend and the PageBuilder: Backend you can jump right into adjusting the already created default-settings. With our PageBuilder: Quickquide you can greatly reduce the time until you can focus on creating the content of your site.

Features​

  • WYSIWYG Editor
  • Centralized overview of design options
  • Simple, intuitive use of the content elements
  • Good customization of the elements to your own needs
  • Content elements can be placed directly on the page
  • custom improved Media Manager
  • custom improved Draft / Publishing
  • Internationalization support
  • SEO Features
  • built in Search Function
  • Context-based sets with settings
  • Consistent branding possible
  • Role Management
  • ... and much more!
  • PageBuilder: Backend: Extend your existing Strapi application with full-fledged website-builder-capabilities by installing as plugin in addition to your existing content-types & logic.
  • PageBuilder: Frontend: Can be used as production-ready (page-router based) Next.js 14 starter.