npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@strapi/starter-next-corporate

v1.0.4

Published

Strapi corporate starter with Next.js

Downloads

49

Readme

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:

  • Pages creation within Strapi, no code necessary
  • Fully flexible page structure: design the pages you want using UI Sections
  • 8 UI Sections out of the box: Hero, RichText, LargeVideo, Testimonials, Pricing, BottomActions, FeatureRows, FeatureColumns
  • Easy to theme with Tailwind
  • Static site generation with Next
  • An integrated Preview Mode, to view your pages on a private URL before publishing them
  • Content in multiple languages using i18n

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.

# Using Yarn
yarn create strapi-starter my-site next-corporate

# Or using NPM
npx create-strapi-starter 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:

  • Create a new component in Strapi in the "sections" category
  • In the Content-Types Builder, open the Pages collection and check your new section on the contentSections field.
  • Create a React component that takes a data prop in /frontend/components/sections
  • To link your Strapi section to this React component, open /frontend/components/sections.js, and add an entry to the sectionComponents object.

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:

  • NEXT_PUBLIC_STRAPI_API_URL: URL of your Strapi backend, without trailing slash
  • PREVIEW_SECRET: a random string used to protect your preview pages

And for the backend:

  • FRONTEND_URL: URL of your frontend, without trailing slash
  • FRONTEND_PREVIEW_SECRET: token of Next.js preview mode defined on the frontend

Have fun using this starter!