strapi / strapi-starter-next-corporate

Next.js starter for creating a corporate site with Strapi.
https://strapi-starter-next-corporate.vercel.app
MIT License
346 stars 94 forks source link
jamstack nextjs starter strapi

:no_entry: DEPRECATED

This repository is no longer maintained and only works for Strapi v3. You can find the latest Strapi v4 version of this starter on the starters-and-templates monorepo.


Strapi Starter Next Corporate Site

Next starter for creating a corporate site with Strapi.

View the live demoRead the blog post

screen-website

This starter is designed for flexibility. Using it, you'll be able to manage your website content entirely in Strapi, and get a Next app automatically generated. Marketing teams will be able to create pages and design their layout without help from developers.

This starter features:

This starter uses the Strapi corporate template

Check out all of our starters here

Getting started

Use our create-strapi-starter CLI to create your project.

npx create-strapi-starter@3 my-site next-corporate

The CLI will create a monorepo, install dependencies, and run your project automatically.

The Next frontend server will run here => http://localhost:3000

The Strapi backend server will run here => http://localhost:1337

Preview Mode

You can turn preview mode on with a URL like this:

http://localhost:3000/api/preview?secret=<preview-secret>&slug=<slug>

<preview-secret> is the secret token defined in your .env config, <slug> is the slug you entered in Strapi for your page.

While preview mode is on you can access draft pages just like you would published pages.

For example http://localhost:3000/secret would be available in preview mode.

A banner will remain under the navigation to let you know preview mode is on and it will also allow you to turn it off.

Customize your corporate site

To edit this website, you'll need to run both the frontend and the backend in your development environment.

Adding Sections

We have built sections for you, but you will likely want to add more to fit your needs. Follow these steps:

Custom theme

We use Tailwind CSS for styling. To modify your page's look, you can edit the theme in /front/tailwind.config.js. Read the Tailwind docs to view all the changes you can make. For example, you can change the primary color like this:

const { colors } = require(`tailwindcss/defaultTheme`)

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: colors.green,
      },
    },
  },
}

Deploying to production

You will need to deploy the frontend and backend projects separately. Here are the docs to deploy each one:

Don't forget to set up your environment variables on your production apps.

Here are the required ones for the frontend:

And for the backend:

Have fun using this starter!