

Nextjs製のブログサービスをビルドした際、AMP validation でタイトルのエラーが発生しています。  
対象画面のhtmlソースを見ると、確かに`<head>`内に以下の記載がありました。

[code]

    <style amp-keyframes>
            @keyframes spin {
                to {
                    transform: rotate(1turn)
                }
            }
    
            @keyframes ping {
    
                75%,
                to {
                    transform: scale(2);
                    opacity: 0
                }
            }
    
            @keyframes pulse {
                50% {
                    opacity: .5
                }
            }
        </style>
    
[/code]

しかし、上記のコードは埋め込んでいません。  
依存ライブラリがビルド時に自動でマージしていると予想しています。  
どのライブラリが影響しているかわかる方いらっしゃればご教示いただきたく。

`package.json`の一部は以下です。

[code]

    "devDependencies": {
        "@fullhuman/postcss-purgecss": "^4.0.3",
        "@hookform/resolvers": "1.3.0 because of https://github.com/react-hook-form/resolvers/issues/100",
        "@material-ui/core": "^4.11.3",
        "@material-ui/icons": "^4.11.2",
        "@material-ui/lab": "^4.0.0-alpha.57",
        "@material-ui/styles": "^4.11.3",
        "@serverless/aws-cloudfront": "^6.0.0",
        "@serverless/aws-lambda": "^3.0.3",
        "@serverless/aws-s3": "^4.2.0",
        "@serverless/domain": "^6.1.0",
        "@types/enzyme-adapter-react-16": "^1.0.6",
        "@types/highlight.js": "^10.1.0",
        "@types/jest": "^26.0.20",
        "@types/marked": "^1.2.0",
        "@types/node": "^14.14.9",
        "@types/react": "^17.0.0",
        "@types/react-test-renderer": "^17.0.1",
        "@types/rss": "^0.0.28",
        "@types/styled-components": "^5.1.7",
        "@types/yup": "^0.29.11",
        "@typescript-eslint/eslint-plugin": "^4.8.1",
        "@typescript-eslint/parser": "^4.8.1",
        "@zeit/next-css": "^1.0.1",
        "babel-plugin-inline-react-svg": "^1.1.2",
        "babel-plugin-transform-remove-console": "^6.9.4",
        "cssnano": "^5.0.1",
        "date-fns": "^2.16.1",
        "dotenv": "^8.2.0",
        "enzyme": "^3.11.0",
        "enzyme-adapter-react-16": "^1.15.6",
        "enzyme-to-json": "^3.6.1",
        "eslint": "^7.32.0",
        "eslint-config-next": "^11.0.1",
        "eslint-config-prettier": "^6.15.0",
        "eslint-plugin-prettier": "^3.1.4",
        "eslint-plugin-react": "^7.21.5",
        "gray-matter": "^4.0.2",
        "highlight.js": "^10.4.0",
        "jest": "^26.6.3",
        "marked": "^1.2.5",
        "next": "^10.0.2",
        "next-pwa": "^5.2.14",
        "nextjs-progressbar": "^0.0.7",
        "optimize-css-assets-webpack-plugin": "^6.0.1",
        "postcss": "^8.1.8",
        "postcss-cli": "^8.3.1",
        "postcss-flexbugs-fixes": "^5.0.2",
        "postcss-preset-env": "^6.7.0",
        "prettier": "^2.2.0",
        "pretty-quick": "^3.1.0",
        "raw-loader": "^4.0.2",
        "react": "^17.0.1",
        "react-dom": "^17.0.1",
        "react-hook-form": "^6.15.1",
        "react-test-renderer": "^17.0.1",
        "rss": "^1.2.2",
        "serverless": "^2.23.0",
        "styled-components": "^5.2.1",
        "stylelint": "^13.8.0",
        "stylelint-config-recommended": "^3.0.0",
        "stylelint-config-standard": "^20.0.0",
        "ts-jest": "^26.5.3",
        "typescript": "^4.3.2",
        "yup": "^0.32.8"
      }
    
[/code]


CC BY-SA 4.0
2021-08-21T04:05:33.183
80945
2021-08-21T04:20:49.703
31203
question
next.js
[Amp Validation for Nextjs]error The parent tag of tag 'style[amp-keyframes]' is 'head', but it can only be 'body'


自己解決しました。  
実装ミスでした。  
`$ROOT/pages/_document.tsx`でビルドしたインラインCSSを読み込んでおり、その中にamp系CSSが含まれていた為でした。  
以下対象コードです。

[code]

    # ［...]
    
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    import inlineCss from '!raw-loader!../../styles/output.css';
    
    # ［...]
    
                        <style
                            key={`custom`}
                            dangerouslySetInnerHTML={{
                                __html: `${inlineCss}`,
                            }}
                        />,
    
[/code]


CC BY-SA 4.0
2021-08-21T04:20:49.703
80947
2021-08-21T04:20:49.703
31203
80945
answer