Using Storybook with Amplify in a Next.js application runtime

I am attempting to run Storybook from Amplify in a Next.js project. Initially, the framework was set as Next.js SSR, but I changed it to React while keeping the app platform as Web Compute.

In the amplify.yaml file, I made the following updates:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm install
        - nvm use
        - yarn install --immutable
    build:
      commands:
        - npm run build-storybook
  artifacts:
    baseDirectory: storybook-static
    files:
      - "**/*"
  cache:
    paths:
      - node_modules/**/*

Despite these changes, the build consistently fails with the following error message:

2023-02-15T09:45:08.672Z [WARNING]: info
...
Terminating logging...

It seems like the system is still expecting a Next.js app. How can I successfully run Storybook in a Next.js app on Amplify?

amazon-web-servicesnext.jsstorybookaws-amplify

Answer №1

To resolve the issue, I made a crucial change by switching my Amplify branches' framework from "Next.js - SSR" to "Next.js - SSG". If you're facing a similar problem, you can refer to this guide for a solution.

Before proceeding with the setup, make sure to create an IAM user with appropriate privileges if you haven't done so already. While setting up the CLI quickly, I granted this user Amplify admin access in haste. It's advisable to be more cautious and deliberate in such actions.

After making these changes, Amplify no longer searched for a standalone directory within ./storybook-static, leading to a successful build process and deployment of the page.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering an issue with state setting - Experiencing an excessive amount of re-renders in a

If you want to see the solution in action, check out the Code Sandbox link provided below for better clarity on the issue at hand. Currently facing an issue with setting my mymoviegenreobjects as the mymoviegenreinfo state within the useFetchMovieGenreRes ...

javascriptreactjsnext.jssetstate

Optimizing Next.js links for seamless functionality when deployed on AWS Cloudfront

I'm currently in the process of setting up a prototype project with Next.js by utilizing a Static html export (specifically, next export) and then transferring the output to AWS S3 for Cloudfront to serve. In my /pages directory, I have the following ...

amazon-web-servicesamazon-s3next.jsamazon-cloudfront

Ways to incorporate a language switcher with next-intl

"use client"; import { useLocale } from "next-intl"; import { locales, localeNames } from "../../i18nconfig"; import { useRouter } from "next/router"; import Link from 'next/link'; import { Fragment } from ...

next.jsnext-intl

Tips for rendering a server-side component within a client-side component in a React 18 - Next.js 14 application router

As outlined in this RFC: Server Components or call server hooks/utilities cannot be imported by Client Components, as they are specific to server functionality. Currently, I am developing a project using react v18.2 and nextjs v14 with app router integr ...

reactjsnext.jsnext.js13

Cease the API request upon route transition in Next.js. Make sure to only execute the API call once when the page initially

I'm working on a Next.js page and I need to ensure that the API is only called in "getServerSideProps" when the page is loaded for the first time. For instance, when a user visits the xyz page, I want to fetch data from the API. However, if they navig ...

reactjsnext.js

A guide to retrieving data in React with useSWR whenever the state changes

In a specific scenario, I need to be able to choose users from a dropdown menu. Once a user is selected, the app should display that user's data. Upon loading the page, the app fetches the data for the first user in the array allUsers?.[0]: const [us ...

javascriptreactjsnext.jsswr

Setting up user roles using Firebase Auth in NextJS application

Seeking a solution to implement a multi-level role system for my blog website. Currently utilizing Firebase Auth for authentication with email/password, but all users have the same posting/editing access. Looking to differentiate between Admins, Moderators ...

javascriptfirebasenext.jsfirebase-authentication

Is there a problem with Framer Motion exit and AnimatePresence in Next.js?

Why isn't my exit prop or AnimatePresence working as expected? This is my custom variant: const imgVariant = { initial: { opacity: 0, y: -100, }, animate: { opacity: 1, y: 0, transition: { type: " ...

javascriptreactjsanimationnext.jsframer-motion

Next.js Project Encountering AWS Amplify Authentication Error: "UserPool not configured"

I am currently developing a project using NextJS and integrating AWS Amplify for authentication with Amazon Cognito. However, I am facing an issue where an error message saying "Auth UserPool not configured" pops up when attempting to log in or sign up. I ...

next.jsamazon-cognitoaws-amplifyaws-sam

NextJS: Route Handler encountering Method Not Allowed (405) error when trying to redirect

Current NextJs version is 13.4.3 I have set up a route handler to capture POST requests. For more information on route handlers, please refer to the documentation at [https://nextjs.org/docs/app/building-your-application/routing/router-handlers] In this ...

typescriptredirectnext.jsnext.js13

What is the best way to navigate to a different URL using useRouter in Next.js?

I have a simple search bar component in my Next.js application that I want to include in the main navbar and also use on a dedicated search page. The goal is to redirect the user to "/search?q=INPUTVALUE" upon submission. However, instead of going to the s ...

reactjsformsnext.js

Having trouble rendering the response text from the API fetched in Next.js on a webpage

I've written some code to back up a session border controller (SBC) and it seems to be working well based on the output from console.log. The issue I'm facing is that the response comes in as a text/ini file object and I'm unable to display ...

javascripthtmlnode.jsreactjsnext.js

The issue arises when attempting to utilize ExpressJS middleware in conjunction with NextJS Link feature

Incorporating Next with Express routes, I have set up a scenario where /a should only be accessible to authorized individuals, while /b is open to the public. ... other imports... const app = next({ isDev }) const handle = app.getRequestHandler() async f ...

javascriptexpressnext.js

Preventing the Rendering of a Form Field in NextJS While Still Including it in the Submit Action

Currently, I am in the process of updating a card record that contains fields such as cardText, source, and ownedBy. The ownedBy field is an array, not editable by the user, but crucial for preserving its value during the Patch operation. To hide the owne ...

reactjsformsnext.js

Can Capacitor be integrated with the latest NextJS 13's "/app" architecture?

I'm experiencing challenges with implementing Capacitor in my NextJS 13 project that utilizes the new App router. Is there a way to generate an "out" folder and an "index.html" file when building the application while following the new "/app" structu ...

next.jscross-platformcapacitornext.js13capacitor-plugin

Tips for storing a buffer in an S3 Bucket

I am looking for a way to directly save a Buffer of an image into an S3 bucket without needing to save it locally. Currently, I am using the gm node module to convert an image to a buffer. This is my current code: var fs = require('fs'), ...

node.jsamazon-web-servicesamazon-s3npm

Error message: Unable to render content from layout.js in index.js due to unspecified

I am working with Layout.js and this is the code snippet: import Layout from '../components/Layout'; export default function Home(){ <Layout> test </Layout> } I am trying to display 'test' in m ...

reactjsnext.jsframeworksreact-fullstack

Exploring the integration of LeafLet into Next JS 13 for interactive mapping

I'm currently working on integrating a LeafLet map component into my Next JS 13.0.1 project, but I'm facing an issue with the rendering of the map component. Upon the initial loading of the map component, I encountered this error: ReferenceError ...

reactjstypescriptnext.jsleafletreact-leaflet

React/NextJS: Firebase Realtime Database displaying the message "Error: Client is offline"

Encountering an occasional error when using React with NextJS to fetch data from a Firebase Realtime Database. Unhandled Runtime Error Error: Error: Client is offline. Currently utilizing Firebase version 9.0.1 for React. The initialisation and configura ...

javascriptreactjsfirebasefirebase-realtime-databasenext.js

Having trouble with Laravel Sanctum CSRF and NextJs 14 integration

Currently, I am facing a challenge with communication between my Laravel server and Next.js frontend. An error 419 related to CSRF is encountered when sending requests like login requests. I want to highlight that tests were carried out on the same Larave ...

restnext.jslaravel-10laravel-sanctumcsrf-token