عبد النور محمد

أنا أستخدم nextjs على vercel.

إجراء اختبار google lighthouse Pagespeed على صفحتي الرئيسية.

تقوم بإرجاع "إزالة ملفات جافا سكريبت غير المستخدمة"  وتسرد ملفات جافا سكريبت لصفحاتي الثابتة الأخرى مثل 

privacy-policy.js
about.js....

لماذا يتم تحميل صفحات أخرى وأنا لست في تلك الصفحات؟ كيف يمكنني إيقافها بحيث يتم تحميلها على عنوان url الخاص بهم فقط.

سؤالي هو كيفية إنشاء ملف sitemap وإضافته بشكل ديناميكي إلى مشروع nextjs. لقد أنشأت مدونة باستخدام nextjs و mongodb و express js. هذه هي الواجهة الأمامية لهيكل مشروعي (nextjs)

--.next
-- components
-- node_modules
-- pages
-- public
-- config.js
-- next.config.js
-- package.json
-- package-lock.json

أنا أقرأ Nextjs جزء البيانات من الوثائق وخطر ببالي سؤال واحد.

يمكن لـ Nextjs جلب البيانات باستخدام getStaticProps و getStaticPaths و getInitialProps و getServersideProps ، أليس كذلك؟

لكن البعض يحدث في وقت البناء كما أقتبس:

getStaticProps (Static Generation): Fetch data at build-time

متى يحدث هذا وقت البناء؟

هل هو عند تشغيل npm تشغيل البناء؟ (لبناء بناء الإنتاج)

أو عندما يصل المستخدم إلى تطبيق Nextjs الخاص بنا؟ (عند كل طلب)

أحتاج إلى قيمة href افتراضية لـ Next / Link ، كما نفعل في لغة html العادية كما هو موضح أدناه

<a href='#' ></a>

لقد جربت هذا الارتباط ولكن ينتج خطأ بسبب السمة المطلوبة

<Link href='#'></Link>

أحتاج إلى تحميل بعض الملفات إلى S3 من تطبيق NextJs. فتعيين متغيرات البيئة يجب أن يعمل ولكنه لا يعمل عند تعيين  accessKeyID و secretKey.

next.config.js

module.exports = {
  env: {
    AWS_ACCESS_KEY_ID: process.env.AWS_ACCESS_KEY_ID
  },
  serverRuntimeConfig: {
    AWS_SECRET_ACCESS_KEY: process.env.AWS_SECRET_ACCESS_KEY
  }
}

config/index.js

export default {
  awsClientID: process.env. AWS_ACCESS_KEY_ID,
  awsClientSecret: process.env.AWS_SECRET_ACCESS_KEY
}

import AWS from 'aws-sdk'
import config from '../config'

AWS.config.update({
  accessKeyId: config.awsClientID,
  secretAccessKey: config.awsClientSecret,
});

const S3 = new AWS.S3()

const params = {
  Bucket: "bucketName",
  Key: "some key",
  Body: fileObject,
  ContentType: fileObject.type,
  ACL: 'public-read'
}

await S3.upload(params).promise()

كتابة بيانات الاعتماد مباشرة فوق تعمل دون مشاكل

مرحبا لدي مشروع nextjs أعمل عليه وهو حاليا في استضافة vps في السابق كنت عندما أعمل git pull في vps ثم أبني المشروع يعمل بدون مشاكل الأن قمت بتطوير المشروع و واردت أن أجلب التحديثات الأخيرة في vps ثم البناء لكن يظهر هذا الخطأ بعد أن يأخذ وقت كبير

process killed

رغم أنني قمت بالبناء محليا دون مشاكل

أقوم بإنشاء extension chrome الذي سيحتاج إلى إجراء مكالمة API عند تلقي رسائل معينة من النص البرمجي للمحتوى. أواجه صعوبة في تقديم طلب HTTP وأعتقد أن الخطأ في تكوين webpack الخاص بي.

لقد حاولت استخدام node-fetch و axios ولا يعمل أي منهما بالنسبة لي.

يبدو ملف webpack.common.js الخاص بي كما يلي:

const path = require("path");

module.exports = {
  target: "node",
  entry: {
    popup: path.join(__dirname, "src/popup/index.tsx"),
    background: path.join(__dirname, "src/background.ts"),
    contentScript: path.join(__dirname, "src/contentScript.ts"),
  },
  output: {
    path: path.join(__dirname, "dist"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        exclude: /node_modules/,
        test: /\.tsx?$/,
        use: "ts-loader",
      },
      {
        exclude: /node_modules/,
        test: /\.scss$/,
        use: [
          {
            loader: "style-loader", // Creates style nodes from JS strings
          },
          {
            loader: "css-loader", // Translates CSS into CommonJS
          },
          {
            loader: "sass-loader", // Compiles Sass to CSS
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },
};

dispatchRequest.js:52 Uncaught (in promise) TypeError: adapter is not a function
    at dispatchRequest (dispatchRequest.js:52)

أريد استيراد jQuery ديناميكيًا حتى تتمكن حزمة الويب من إرسالها ك chunk  ولكن عندما أستخدم الاستيراد الديناميكي مثل هذا

import ('../vendorjs/jquery-3.3.1.min.js').then($ => {
    (function() {
        $('.tabs').tabs();
    })
});

ولكن عندما أقوم بتشغيل webpack   أحصل على حزمة الأخطاء هذه

ERROR in ./src/js/materialize.init.js 1:7
Module parse failed: Unexpected token (1:7)
You may need an appropriate loader to handle this file type.
import ('../vendorjs/jquery-3.3.1.min.js').then($ => {
(function() {
| $('.tabs').tabs();
@ ./src/js/index.js 9:0-28

كيف تتم استضافة مشروع next في vps server وماهي الخطوات التي يجب علي اتباعها 

لدي مكون بوت (Watson) يحتوي على هذا البرنامج النصي

<Script>
                {`
    
                  
              window.watsonAssistantChatOptions = {
                showLauncher: false,
                openChatByDefault: true,
                element: document.querySelector('.chatElement'),
                onLoad: function(instance) {
                    instance.updateHomeScreenConfig({
                        is_on: true,
                        greeting: '',
                        starters: {
                          is_on: true,
                          buttons: [
                            {
                              label: 'Turn home screen off',
                            },
                            {
                              label: 'Add conversation starters',
                            },
                            {
                              label: 'Add custom content',
                            },
                          ],
                        },
                      });

                    // Subscribe to the "pre:send" event.
                    instance.on({ type: "pre:send", handler: preSendhandler });
                  
                    instance.render();
                  }
              };

                setTimeout(function(){
                const t=document.createElement('script');
                t.src="https://web-chat.global.assistant.watson.appdomain.cloud/versions/" +
                    (window.watsonAssistantChatOptions.clientVersion || 'latest') +
                    "/WatsonAssistantChatEntry.js"
                document.head.appendChild(t);
                `}
</Script>

البرنامج موضوع في _documeny.js

المشكلة هي في كل مرة أقوم فيها بتغيير الصفحة  يتم إنشاء شاشة دردشة اخرى

مع __dirname

  output: {
    assetModuleFilename: "images/[hash][ext][query]",
    path: path.resolve(__dirname, 'dist')
  }, 

بدون __dirname

  output: {
    assetModuleFilename: "images/[hash][ext][query]",
    path: path.resolve('dist')
  }, 

إذن ما هي الحاجة لاستخدام __dirname هنا ؟؟

أحاول تحميل ملفات json مختلفة ، اعتمادًا على البيئة. بتعبير أدق ، أريد تحميل appsettings.development.json عندما يكون على NODE.ENV = "development" ، ثم استخدمه داخل الكتابة المطبوعة ككائن تكوين عام. أيضًا عندما يتغير NODE.ENV الخاص بي إلى "الإنتاج" ، أريد تحميل appsettings.production.json.

لقد قمت بالفعل بتكوين حزمة الويب لإصدارات مختلفة باستخدام ملفات مثل webpack.config.js و webpack.config.dev.js و webpack.config.prod.js.

إذا كان بإمكاني إضافة شيء مثل استيراد التكوين من `... / config. $ {NODE.ENV} .json` فسيكون ذلك مثاليًا؟

هذا هو ملف next.config.js الخاص بي 

...
async redirects() {
      {
        source: '/shop',
        has: [
          {
            type: 'query',
            key: 'q',
            value: '(<sef>)',
          },
        ],
        permanent: false,
        destination: '/shop/:sef',
      },
}
....

هذا لا يعيد التوجيه من shop?q = sefإلى shop / sef.

ما المشكلة في هذا الأمر؟

مرحبا أحاول اعداد  axios واستدعاءه لاستخدامه في كل طلباتي لكن الجزء الخاص بوضع ال token authorization لا يعمل 

import axios from 'axios';

const Axios = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API,
});

let token;
if (window) {
  token = JSON.parse(localStorage.getItem('zu')).state?.auth?.token;
}

Axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

export default Axios;

هل من اقتراح

أنا أعمل حاليًا مع next@11.1.2 و webpack v5 وتعطلت لساعات مع إصلاح تحميل mp3. لقد جربت العديد من الحلول لم يعمل أي منهم من أجلي.

Type error: Cannot find module 'public/sounds/bighit.mp3' or its corresponding type declarations.

  14 | 
  15 | // Assets
> 16 | import sound_bighit from "public/sounds/bighit.mp3"
     |                          ^
info  - Checking validity of types .%     

onst path = require('path')
const SRC = path.resolve(__dirname, 'public/sounds/')

module.exports = {
    webpack: (config, { }) => {

        config.module.rules.push({
            test: /\.mp3$/,
            incluse: SRC,
            use: {
                loader: 'file-loader',
                options: {
                    name: '[name].[contenthash].[ext]',
                    outputPath: 'public/sounds/',
                    publicPath: 'public/sounds/'
                }
            }

        })

        // config.module.rules.push({
        //     test: /\.mp3$/,
        //     use: {
        //         loader: 'file-loader',
        //     },
        // })

        // config.module.rules.push({
        //     test: /\.mp3/,
        //     use: {
        //         loader: 'url-loader',
        //     },
        // })

        return config
    }
}

أحاول تشغيل "npm run dev" في مشروع Laravel الخاص بي ولكن حدث خطأ

 Error: Cannot find module 'webpack-cli/package.json' Require stack:

C:\Users\abdal\AppData\Roaming\npm-cache_npx\20792\node_modules\webpack\bin\webpack.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15) at Function.resolve (internal/modules/cjs/helpers.js:78:19) at runCli (C:\Users\abdal\AppData\Roaming\npm-cache_npx\20792\node_modules\webpack\bin\webpack.js:50:26) at C:\Users\abdal\AppData\Roaming\npm-cache_npx\20792\node_modules\webpack\bin\webpack.js:139:5 at processTicksAndRejections (internal/process/task_queues.js:97:5) { code: 'MODULE_NOT_FOUND', requireStack: [ 'C:\Users\abdal\AppData\Roaming\npm-cache\_npx\20792\node_modules\webpack\bin\webpack.js' ] }

مع أنه تم تنزيل webpack cli.

واجهت هذا الخطأ

 Invalid src prop

لكنني اتبعت هذا المرجع Invalid src prop في Next.js ولكن تم عرض الخطأ نفسه

import Image from 'next/image';
import React, { Component } from 'react';  
import logo from '../../public/logo.png';
// import dynamic from "next/dynamic";
// import { Grid} from "semantic-ui-react"; 
function TopBannerApi(props) {
  return (
    <>
  <h1>Footer</h1>
      <p>
         {props.topbannerresult.map((post) =>(
           <>
            <Image src={post.image} alt="test"/>
              {/* <p>{post.store_name}</p> */}
            </>
          ))}
      </p>
    </>
  )
}
export default TopBannerApi;

module.exports = {
  reactStrictMode: true, 
  images: {
    domains: ['dl8mjowvdz1rh.cloudfront.net'],
  }

}

أنا مبتدئ في  next ولدي مشكلة كما هو مذكور  يعمل المشروع في وضع dev ولكن عندما أقوم بتشغيل npm run build ، يظهر هذا الخطأ.

Cannot destructure property 'components' of 'object null' as it is null in nextjs

أحاول تكوين واجهة برمجة التطبيقات الخاصة بي لإنشاء بعض المشاريع الشخصية ، ولكن في حالتي ، فإن الطريقة التي تستخدم مجلد / pages / api تعمل فقط مع المضيف المحلي عندما أنشر على الخادم على Vercel لا يمكن للمشروع العثور على نقاط النهاية الخاصة بي .

axios api

import axios from 'axios'

const api = axios.create({
  baseURL: '/api/'
})

export default api

swr hook

import api from 'src/services/api'
import useSWR from 'swr'

function SwrFetchHook<Data = any, Error = any>(url: string) {
  const { data, error } = useSWR<Data, Error>(url, async url => {
    const response = await api.get(url)
    return response.data
  })

  return { data, error }
}

export default SwrFetchHook

const { data } = SwrFetchHook<INavItem[]>('categories')

أنا أستخدم webpack 5 config لتشغيل مستودع react ويبدو أن كل شيء يعمل بشكل جيد باستثناء تحميل الصور ، لدي خطأ لا أفهمه:

ERROR in ./src/assets/styles/main.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve 'file-loader' in...........

لقد حاولت إعادة تثبيت بعقب mini-css-extract-plugin الذي لم ينجح ، ولست متأكدًا مما يمكن أن يكون المشكلة هنا.

  rules: [
      {
        test: /\.(js|jsx)$/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: "images",
            },
          },
        ],
      },

أنا أستخدم Webpack وأحاول استخدام صورة png لعرضها في متصفح Firefox الخاص بي. تكمن المشكلة في أن Webpack يقوم بإنشاء صورتين في مجلد dist 

 webpack.config.js

module: {
    rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },
        {
            test: /\.(jpe?g|png|gif|svg)$/,
            use: ['file-loader']

        }
    ]
}

.logo {
background-image: url('../assets/foto.png');
background-size: cover;
height: 200px;
width: 200px;
margin: 0 auto;}

 <div class="logo"></div>

 dist/ 
   - h74g3ffgf3ff34h76.png
   - analytics.54t54gg4.js
   - ab0d12j489gh4igh8.png
   - index.html
   - main.h74rg34u73f.js
 src/
     assets/
       - foto.png
     styles/
       - styles.css
   - analytics.js
   - index.html
   - script.js
- package-lock.json
- package.json
- webpack.config.js

أخطط لإضافة مكتبة React-slick إلى مشروع nextjs الخاص لشريط تمرير الصور  ولكن أواجه مشكلة

ولكن بمجرد أن أقوم باستيراد css في ملف _app.tsx الخاص بي ، فإنه يعطي خطأ

Module not found: Can't resolve '~slick-carousel/slick/slick-theme.css'

_app.js

import React from "react";
import { AppProps } from "next/app";
import Head from "next/head";
import "@styles/global.scss";
import { Provider } from "react-redux";
import store from "@redux/store";  
import { MuiThemeProvider } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";
import theme from "src/createMiuitheme";


import "~slick-carousel/slick/slick.css";              
import "~slick-carousel/slick/slick-theme.css";         

function MyApp({ Component, pageProps }: AppProps): JSX.Element {
  // const theme = responsiveFontSizes(createTheme());
  return (
    <>
      <Head>
        <link rel="shortcut icon" href="#" />
        <meta charSet="utf-8" />
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
        />
        <meta name="theme-color" content={theme.palette.primary.main} />
      </Head>
      <Provider store={store}>
        <MuiThemeProvider theme={theme}>
        <CssBaseline />
          <Component {...pageProps} />
        </MuiThemeProvider>
      </Provider>
    </>
  );
}

export default MyApp;

أنا جديد على Next.js وفي مشروعي ، قمت بتثبيت dotenv (https://www.npmjs.com/package/dotenv) وأنشأت ملف .env في جذر المشروع وكل شيء يعمل بشكل جيد.

السابق. API_BASE_PATH = http: // localhost: 8000 / api

بعد ذلك ، قمت بإنشاء ملف .env آخر أطلق عليه اسم .env.testing هناك ، ولدي قيم مختلفة لـ API_BASE_PATH.

فكيف يمكنني التبديل بين تلك .env في local development؟

"scripts": {
    "dev": "next dev -p 3001",
    "build": "next build",
    "start": "next start",
    "export": "npm run build && next export"
  },

أريد إضافته إلى scripts

في next.config.js الخاص بي ، لدي التكوين التالي

const withCSS = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
const withImages = require('next-images');
const withFonts = require('next-fonts');

module.exports = withCSS(
  withSass(
    withFonts(),  // <=== هل هذا صحيح؟
    withImages({
      distDir: '../_next',
      webpack(config) {
        return config;
      }
    })
  )
);

لقد قمت بإعداد ملف تكوين webpack 5 بسيط مع خادم مطور يبدو أنه يعمل ولكن عندما أقوم بإضافة

<link href="/style.css" rel="stylesheet" />

إلى ملف index.html لم أحصل على تحميل CSS أخترت استخدام "style-loader" عبر "MiniCssExtractPlugin" لتمكين إعادة تحميل 

لا توجد أخطاء في إخراج وحدة تحكم webpack

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = (env, options) => {
    const mode = options.mode;
    return {
        context: __dirname,
        entry: {
            script: './src/index.bundle.ts',
            style: './src/index.bundle.less',
        },
        output: {
            filename: '[name].js',
            path: path.resolve(__dirname, './src/dist')
        },
        devServer: {
            watchFiles: ['src/**/*.less'],
            static: {
                directory: path.join(__dirname, 'src'),
                watch: true,
            },
            compress: true,
            port: 9000,
            hot: true,
        },
        devtool: 'source-map',
        resolve: {
            extensions: ['.ts', '.tsx', '.js', '.css', '.less']
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: '[name].css',
                chunkFilename: '[id].css',
                ignoreOrder: false,
            }),
        ],
        module: {
            rules: [{
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            target: 'browserslist'
                        }
                    }
                },
                {
                    test: /\.ts(x)?$/,
                    loader: 'ts-loader',
                    exclude: /node_modules/
                },
                {
                    test: /\.css$/,
                    use: [
                        mode === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
                        {
                            loader: 'css-loader',
                        },
                        {
                            loader: 'postcss-loader', // Run postcss actions
                            options: {
                                postcssOptions: {
                                    config: path.resolve(__dirname, "postcss.config.js"),
                                }
                            }
                        },
                    ]
                },
                {
                    test: /\.less$/,
                    use: [
                      mode === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
                      'css-loader',
                      'less-loader'
                    ]
                },
            ]
        },
        optimization: {
            minimize: true,
            minimizer: [new TerserPlugin(), new CssMinimizerPlugin()]
        },
        target: 'web',
    }
};