Long-form Storytelling eCommerce with Next JS

Check out our live demo of the long form storytelling boilerplate.

To get started with your own long-form storytelling run the following command.

npx @crystallize/cli <your-project-name>

Running this command will allow you to add in the following:

• The preferred boilerplate, which will be ‘NextJS - Content and commerce’ in this case.
• The tenant: you can either enter your own tenant or go with the demo tenant to test everything out.

Running the project in development is very straightforward. Running the following command will start up the development server:

yarn dev
or
npm run dev

Once the development server is running, you will be able to browse to http://localhost:3000.

There are two ways to deploy your project to Netlify. You can use GitHub integration by following the Netlify integration guide provided by GitHub or you can do it using the CLI. To deploy using the CLI, make sure to install Netlify-cli:

npm install -g netlify-cli

Once that is installed, log in to Netlify by typing the following command. This redirects you to Netlify where you will be asked to log in.

ntl login

After logging in, navigate to the root directory and initialize a new Netlify site:

ntl init

• Select the ‘create and configure a new site’ option
• Choose your team
• The next step is to give your website a name, this is optional and can be changed later If no answer is provided, Netlify generates a random one
• Then, you will be asked to provide access to the GitHub account
• The build command can be set to ‘next build’
• Specify the directory you would like to deploy, in our case, it is the .next directory
• Lastly, you can specify the folder containing the Netlify function. Considering there is no folder for those at present, we can leave it blank

There is one environment variable you need to set:

NEXT_PUBLIC_CRYSTALLIZE_TENANT_IDENTIFIER=<your-tenant>

We recommend that you set this using the Netlify dashboard. However, it can also be set in the netlify.toml file along with build settings and deploy settings.

There are two ways of deploying to Vercel.

The easiest is through the Vercel Github integration. Follow that guide to get automatic deployments for each git push.

Alternatively, you can also deploy manually from the command line. In order to enable that you need to install Vercel and log in via the CLI:

vercel login

There is one environment variable you need to set:

NEXT_PUBLIC_CRYSTALLIZE_TENANT_IDENTIFIER=<your-tenant>

We recommend that you set this using the Vercel dashboard.

Deploying your Crystallize project with Vercel is easy. If you have used the GitHub integration, you simply push to GitHub and that’s it. The deployment will be initiated.

If you want to do it with the CLI, you execute a deployment with this command:

vercel

This will build the website and deploy it to Vercel. The terminal will say whether the deployment was successful or not. If it has succeeded, you will be given a URL where your site has been deployed.

If you are deploying to production, you can also use the following command to deploy your website to a production domain if you have configured one for your project within the dashboard of Vercel:

vercel --prod