diff --git a/src/components/Sidebar/data.js b/src/components/Sidebar/data.js index d0c53664..80c67131 100644 --- a/src/components/Sidebar/data.js +++ b/src/components/Sidebar/data.js @@ -322,7 +322,7 @@ export default { }, { title: "انتخاب نسخه NodeJS", - link: "/paas/nodejs/getting-started" + link: "/paas/nodejs/how-tos/choose-version" }, { hr: true @@ -512,20 +512,24 @@ export default { link: "/paas/nextjs/how-tos/use-type-script" }, { - title: "build برنامه با ES6", - link: "/paas/nextjs/how-tos/build-and-use-es6" + title: "استفاده از Static HTML Export", + link: "/paas/nextjs/how-tos/use-static-html-export" }, { - title: "استفاده از Hookها", - link: "/paas/nextjs/how-tos/use-hooks" + title: "افزایش فضای مسیر cache", + link: "/paas/nextjs/how-tos/increase-next-cache" }, { - title: "پیکربندی TrustedProxies", - link: "/paas/nextjs/how-tos/configure-trusted-proxy/about" + title: "استفاده از ISR", + link: "/paas/nextjs/how-tos/use-isr" }, { - title: "انتخاب نسخه NodeJS", - link: "/paas/nextjs/getting-started" + title: "دسترسی به فایل‌های Static", + link: "/paas/nextjs/how-tos/reach-static-files" + }, + { + title: "مشاهده نسخه NodeJS", + link: "/paas/nextjs/how-tos/choose-version" }, { hr: true @@ -582,12 +586,8 @@ export default { ) }, { - title: "رفع خطای CORS", - link: "/paas/nextjs/fix-common-errors/cors-error/about" - }, - { - title: "رفع خطای Get query missing در GraphQL", - link: "/paas/nextjs/fix-common-errors/graphql-error" + title: "رفع خطای ECONNRESET", + link: "/paas/nextjs/fix-common-errors/econnreset" }, ] } diff --git a/src/pages/paas/nextjs/fix-common-errors/about.mdx b/src/pages/paas/nextjs/fix-common-errors/about.mdx index ac2cf07a..277a85d6 100644 --- a/src/pages/paas/nextjs/fix-common-errors/about.mdx +++ b/src/pages/paas/nextjs/fix-common-errors/about.mdx @@ -12,7 +12,7 @@ import NextPage from "@/components/Common/nextpage"; import {GoArrowLeft,} from "react-icons/go"; -# رفع خطاهای رایج در استقرار برنامه‌های NodeJS +# رفع خطاهای رایج در استقرار برنامه‌های NextJS
در فرآیند استقرار برنامه‌های خود ممکن است با خطاهای مختلفی مواجه شوید. این خطاها می‌توانند ناشی از اشتباهات کوچک در تنظیمات سرور، پیکربندی‌های نادرست، یا عدم هماهنگی بین نسخه‌های مختلف ابزارها و کتابخانه‌ها باشند. حتی با داشتن مستندات کامل و دقیق، این مشکلات می‌توانند رخ دهند و اغلب نیز به سادگی قابل حل هستند.
@@ -21,10 +21,9 @@ import {GoArrowLeft,} from "react-icons/go"; یادآوری این نکته ضروری است که مواجهه با این خطاها بخشی طبیعی از فرآیند توسعه و استقرار نرم‌افزار است. با داشتن دانش لازم و پیروی از راهنمایی‌های ارائه‌شده در این مستندات، می‌توانید به راحتی از این مشکلات عبور کرده و تجربه خوبی از استقرار برنامه‌های خود در لیارا، داشته باشید.
-
+
{[ - { platform: 'رفع خطای CORS', link: "./cors-error/about" }, - { platform: 'رفع خطای GET query missing در GraphQL', link: "./graphql-error" }, + { platform: 'رفع خطای ECONNRESET', link: "./econnreset" }, ].map(item => diff --git a/src/pages/paas/nextjs/fix-common-errors/cors-error/about.mdx b/src/pages/paas/nextjs/fix-common-errors/cors-error/about.mdx deleted file mode 100644 index 3da280ae..00000000 --- a/src/pages/paas/nextjs/fix-common-errors/cors-error/about.mdx +++ /dev/null @@ -1,44 +0,0 @@ -import Layout from "@/components/Layout"; -import Button from "@/components/Common/button"; -import Section from "@/components/Common/section"; -import Alert from "@/components/Common/alert"; -import Tabs from "@/components/Common/tab"; -import Step from "@/components/Common/step"; -import Card from "@/components/Common/card"; -import Important from "@/components/Common/important"; -import Highlight from "react-highlight"; -import Link from "next/link"; -import NextPage from "@/components/Common/nextpage"; -import {GoArrowLeft,} from "react-icons/go"; - - -# رفع خطای CORS در برنامه‌های NodeJS -
-خطای CORS (Cross-Origin Resource Sharing) یک محدودیت امنیتی در مرورگرها است که جلوی درخواست‌های HTTP از منابع مختلف را می‌گیرد. -
-این خطا ممکن است زمانی رخ دهد که سعی کنید از یک دامنه یا پورت متفاوت به سروری دیگر درخواست ارسال کنید، و معمولاً با پیام خطایی شبیه به Access-Control-Allow-Origin در مرورگر مواجه خواهید شد. در ادامه، به رفع این خطا در فریم‌ورک‌های مختلف، پرداخته شده است: -
-
- {[ - { platform: 'ExpressJS', link: "./expressjs" }, - { platform: 'Fastify', link: "./fastify" }, - { platform: 'Koa', link: "./koa" }, - { platform: 'Hapi', link: "./hapi" }, - { platform: 'NuxtJS', link: "./nuxtjs" }, - { platform: 'AdonisJS', link: "./adonisjs" }, - { platform: 'NestJS', link: "./nestjs" }, - { platform: 'Strapi', link: "./strapi" }, - ].map(item => - - -
-

- فریم‌ورک {item.platform} -

-
- - - - )} -
- \ No newline at end of file diff --git a/src/pages/paas/nextjs/fix-common-errors/cors-error/adonisjs.mdx b/src/pages/paas/nextjs/fix-common-errors/cors-error/adonisjs.mdx deleted file mode 100644 index 114df329..00000000 --- a/src/pages/paas/nextjs/fix-common-errors/cors-error/adonisjs.mdx +++ /dev/null @@ -1,38 +0,0 @@ -import Layout from "@/components/Layout"; -import Button from "@/components/Common/button"; -import Section from "@/components/Common/section"; -import Alert from "@/components/Common/alert"; -import Tabs from "@/components/Common/tab"; -import Step from "@/components/Common/step"; -import Card from "@/components/Common/card"; -import Important from "@/components/Common/important"; -import Highlight from "react-highlight"; -import Link from "next/link"; - - -# رفع خطای CORS در فریم‌ورک AdonisJS -
- -برای رفع این خطا در فریم‌ورک AdonisJS، کافیست تا وارد فایل config/cors.js یا config/cors.ts شوید و مقادیر origin و methods را در این فایل، مانند شکل زیر تنظیم کنید: -
-
- - {`'use strict' - -module.exports = { - origin: '*', - methods: ['GET', 'PUT', 'PATCH', 'POST', 'DELETE', 'HEAD'], - headers: true, - exposeHeaders: false, - credentials: false, - maxAge: 90 -}`} - -
-
- -

-برای کسب اطلاعات بیشتر می‌توانید مستندات رسمی این فریم‌ورک را مطالعه کنید. -

- - \ No newline at end of file diff --git a/src/pages/paas/nextjs/fix-common-errors/cors-error/expressjs.mdx b/src/pages/paas/nextjs/fix-common-errors/cors-error/expressjs.mdx deleted file mode 100644 index 0b7b04d9..00000000 --- a/src/pages/paas/nextjs/fix-common-errors/cors-error/expressjs.mdx +++ /dev/null @@ -1,45 +0,0 @@ -import Layout from "@/components/Layout"; -import Button from "@/components/Common/button"; -import Section from "@/components/Common/section"; -import Alert from "@/components/Common/alert"; -import Tabs from "@/components/Common/tab"; -import Step from "@/components/Common/step"; -import Card from "@/components/Common/card"; -import Important from "@/components/Common/important"; -import Highlight from "react-highlight"; -import Link from "next/link"; - - -# رفع خطای CORS در فریم‌ورک Express JS -
- -برای رفع این خطا در فریم‌ورک Express JS، در ابتدا باید ماژول cors را با اجرای دستور زیر، نصب کنید: - -
-
- - {`npm install cors`} - -
-
- -در نهایت، می‌توانید در برنامه خود، مانند قطعه کد زیر، عمل کنید: -
-
- - {`const express = require('express'); -const cors = require('cors'); -const app = express(); - -// Enable CORS for all origins -app.use(cors()); - -app.listen(3000, () => { - console.log('Server is running on port 3000'); -});`} - -
-
- - - \ No newline at end of file diff --git a/src/pages/paas/nextjs/fix-common-errors/cors-error/fastify.mdx b/src/pages/paas/nextjs/fix-common-errors/cors-error/fastify.mdx deleted file mode 100644 index 34829b63..00000000 --- a/src/pages/paas/nextjs/fix-common-errors/cors-error/fastify.mdx +++ /dev/null @@ -1,40 +0,0 @@ -import Layout from "@/components/Layout"; -import Button from "@/components/Common/button"; -import Section from "@/components/Common/section"; -import Alert from "@/components/Common/alert"; -import Tabs from "@/components/Common/tab"; -import Step from "@/components/Common/step"; -import Card from "@/components/Common/card"; -import Important from "@/components/Common/important"; -import Highlight from "react-highlight"; -import Link from "next/link"; - - -# رفع خطای CORS در فریم‌ورک Fastify -
- -برای رفع این خطا در فریم‌ورک Fastify، در ابتدا باید ماژول‌های cors و fastify-express را با اجرای دستور زیر، نصب کنید: -
-
- - {`npm install cors fastify-express`} - -
-
- -در نهایت، می‌توانید در برنامه خود، مانند قطعه کد زیر، عمل کنید: -
-
- - {`await fastify.register(require('fastify-express')) -fastify.use(require('cors')())`} - -
-
- -

-برای کسب اطلاعات بیشتر می‌توانید مستندات رسمی این فریم‌ورک را مطالعه کنید. -

- - - \ No newline at end of file diff --git a/src/pages/paas/nextjs/fix-common-errors/cors-error/hapi.mdx b/src/pages/paas/nextjs/fix-common-errors/cors-error/hapi.mdx deleted file mode 100644 index 5e9d50f4..00000000 --- a/src/pages/paas/nextjs/fix-common-errors/cors-error/hapi.mdx +++ /dev/null @@ -1,42 +0,0 @@ -import Layout from "@/components/Layout"; -import Button from "@/components/Common/button"; -import Section from "@/components/Common/section"; -import Alert from "@/components/Common/alert"; -import Tabs from "@/components/Common/tab"; -import Step from "@/components/Common/step"; -import Card from "@/components/Common/card"; -import Important from "@/components/Common/important"; -import Highlight from "react-highlight"; -import Link from "next/link"; - - -# رفع خطای CORS در فریم‌ورک Hapi -
- -برای رفع این خطا در فریم‌ورک Hapi، می‌توانید مانند قطعه کد زیر، در برنامه خود، عمل کنید: -
-
- - {`const Hapi = require('@hapi/hapi'); - -const init = async () => { - const server = Hapi.server({ - port: 3000, - host: '0.0.0.0', - routes: { - cors: true // Enable CORS for all origins - } - }); - - - await server.start(); - console.log('Server is running on %s', server.info.uri); -}; - -init();`} - -
-
- - - \ No newline at end of file diff --git a/src/pages/paas/nextjs/fix-common-errors/cors-error/koa.mdx b/src/pages/paas/nextjs/fix-common-errors/cors-error/koa.mdx deleted file mode 100644 index 9edad5bd..00000000 --- a/src/pages/paas/nextjs/fix-common-errors/cors-error/koa.mdx +++ /dev/null @@ -1,43 +0,0 @@ -import Layout from "@/components/Layout"; -import Button from "@/components/Common/button"; -import Section from "@/components/Common/section"; -import Alert from "@/components/Common/alert"; -import Tabs from "@/components/Common/tab"; -import Step from "@/components/Common/step"; -import Card from "@/components/Common/card"; -import Important from "@/components/Common/important"; -import Highlight from "react-highlight"; -import Link from "next/link"; - - -# رفع خطای CORS در فریم‌ورک Koa -
- -برای رفع این خطا در فریم‌ورک Koa در ابتدا باید ماژول‌ cors را با اجرای دستور زیر، نصب کنید: -
-
- - {`npm install @koa/cors`} - -
-
- -در نهایت، می‌توانید در برنامه خود، مانند قطعه کد زیر، عمل کنید: -
-
- - {`const Koa = require('koa'); -const cors = require('@koa/cors'); -const app = new Koa(); - -// Enable CORS for all origins -app.use(cors()); - -app.listen(3000, () => { - console.log('Server is running on port 3000'); -});`} - -
-
- - \ No newline at end of file diff --git a/src/pages/paas/nextjs/fix-common-errors/cors-error/nestjs.mdx b/src/pages/paas/nextjs/fix-common-errors/cors-error/nestjs.mdx deleted file mode 100644 index 3af09aac..00000000 --- a/src/pages/paas/nextjs/fix-common-errors/cors-error/nestjs.mdx +++ /dev/null @@ -1,48 +0,0 @@ -import Layout from "@/components/Layout"; -import Button from "@/components/Common/button"; -import Section from "@/components/Common/section"; -import Alert from "@/components/Common/alert"; -import Tabs from "@/components/Common/tab"; -import Step from "@/components/Common/step"; -import Card from "@/components/Common/card"; -import Important from "@/components/Common/important"; -import Highlight from "react-highlight"; -import Link from "next/link"; - - -# رفع خطای CORS در فریم‌ورک NestJS -
- -برای رفع این خطا در فریم‌ورک NestJS، در ابتدا باید ماژول‌های مورد نیاز را با اجرای دستور زیر، نصب کنید: -
-
- - {`npm install @nestjs/common @nestjs/core cors`} - -
-
- -در نهایت، می‌توانید در فایل src/main.ts خود، مانند قطعه کد زیر، عمل کنید: -
-
- - {`import { NestFactory } from '@nestjs/core'; -import { AppModule } from './app.module'; - -async function bootstrap() { - const app = await NestFactory.create(AppModule); - - app.enableCors({ - origin: '*', - methods: 'GET,HEAD,PUT,PATCH,POST,DELETE', - credentials: true, - }); - - await app.listen(3000, '0.0.0.0'); -} -bootstrap();`} - -
-
- - \ No newline at end of file diff --git a/src/pages/paas/nextjs/fix-common-errors/cors-error/nuxtjs.mdx b/src/pages/paas/nextjs/fix-common-errors/cors-error/nuxtjs.mdx deleted file mode 100644 index b8ce2219..00000000 --- a/src/pages/paas/nextjs/fix-common-errors/cors-error/nuxtjs.mdx +++ /dev/null @@ -1,54 +0,0 @@ -import Layout from "@/components/Layout"; -import Button from "@/components/Common/button"; -import Section from "@/components/Common/section"; -import Alert from "@/components/Common/alert"; -import Tabs from "@/components/Common/tab"; -import Step from "@/components/Common/step"; -import Card from "@/components/Common/card"; -import Important from "@/components/Common/important"; -import Highlight from "react-highlight"; -import Link from "next/link"; - - -# رفع خطای CORS در فریم‌ورک NuxtJS -
- -برای رفع خطای CORS در زمان Proxy کردن درخواست‌ها در برنامه‌های NuxtJS باید در قدم اول با اجرای دستور زیر، پکیج nuxtjs/proxy را در پروژه‌ی خود نصب کنید: -
-
- - {`npm install @nuxtjs/proxy`} - -
-
- -در قدم بعد باید nuxtjs/proxy را در بخش modules فایل nuxt.config.js، اضافه کرده و پیکربندی موردنظر را اعمال کنید: -
-
- - {`modules: [ - ..., - '@nuxtjs/proxy' -], - -axios: { - proxy: true -}, - -proxy: { - '/api/': { - target: 'https://api.example.com/', - pathRewrite: {'^/api/': ''}, - changeOrigin: true - } -}`} - -
-
- -

-توجه داشته باشید که مقادیر target و pathRewrite را در پروژه‌ی خود به‌ترتیب با آدرس API و Route پروژه جایگزین کنید. -

- - - \ No newline at end of file diff --git a/src/pages/paas/nextjs/fix-common-errors/cors-error/strapi.mdx b/src/pages/paas/nextjs/fix-common-errors/cors-error/strapi.mdx deleted file mode 100644 index cde1366a..00000000 --- a/src/pages/paas/nextjs/fix-common-errors/cors-error/strapi.mdx +++ /dev/null @@ -1,30 +0,0 @@ -import Layout from "@/components/Layout"; -import Button from "@/components/Common/button"; -import Section from "@/components/Common/section"; -import Alert from "@/components/Common/alert"; -import Tabs from "@/components/Common/tab"; -import Step from "@/components/Common/step"; -import Card from "@/components/Common/card"; -import Important from "@/components/Common/important"; -import Highlight from "react-highlight"; -import Link from "next/link"; - - -# رفع خطای CORS در فریم‌ورک Strapi -
- -برای رفع خطای CORS در Strapi، باید تنظیمات مربوط به CORS را در فایل config/middleware.js به برنامه خود اضافه کنید: -
-
- - {`module.exports = ({ env }) => ({ - settings: { - cors: { - enabled: true, - origin: '*', - }, - }, -});`} - -
- \ No newline at end of file diff --git a/src/pages/paas/nextjs/fix-common-errors/econnreset.mdx b/src/pages/paas/nextjs/fix-common-errors/econnreset.mdx new file mode 100644 index 00000000..d239638b --- /dev/null +++ b/src/pages/paas/nextjs/fix-common-errors/econnreset.mdx @@ -0,0 +1,20 @@ +import Layout from "@/components/Layout"; +import Button from "@/components/Common/button"; +import Section from "@/components/Common/section"; +import Alert from "@/components/Common/alert"; +import Tabs from "@/components/Common/tab"; +import Step from "@/components/Common/step"; +import Card from "@/components/Common/card"; +import Important from "@/components/Common/important"; +import Highlight from "react-highlight"; +import Link from "next/link"; +import NextPage from "@/components/Common/nextpage"; + + +# رفع خطای ECONNRESET +
+ +خطای ECONNRESET در NextJS به این معنی است که اتصال TCP به طور غیرمنتظره‌ای توسط طرف سرور یا کلاینت، قطع شده است. + +برای رفع این خطا نیاز به انجام کار خاصی نیست؛ چرا که علت عمده رخ دادن این خطا در برنامه‌های NextJS در لیارا، به خاطر کم بودن منابع، است. فقط کافیست تا پلن سخت‌افزاری برنامه خود را، افزایش دهید و برنامه خود را یک‌بار ری‌استارت کنید تا خطا، برطرف شود. + \ No newline at end of file diff --git a/src/pages/paas/nextjs/fix-common-errors/graphql-error.mdx b/src/pages/paas/nextjs/fix-common-errors/graphql-error.mdx deleted file mode 100644 index 09b11ee6..00000000 --- a/src/pages/paas/nextjs/fix-common-errors/graphql-error.mdx +++ /dev/null @@ -1,31 +0,0 @@ -import Layout from "@/components/Layout"; -import Button from "@/components/Common/button"; -import Section from "@/components/Common/section"; -import Alert from "@/components/Common/alert"; -import Tabs from "@/components/Common/tab"; -import Step from "@/components/Common/step"; -import Card from "@/components/Common/card"; -import Important from "@/components/Common/important"; -import Highlight from "react-highlight"; -import Link from "next/link"; -import NextPage from "@/components/Common/nextpage"; - - -# رفع خطای GET query missing در GraphQL -
- -قابلیت Playground در Apollo Server در محیط Production به‌صورت پیش‌فرض غیرفعال است. برای فعال‌سازی، لازم است تا فیلدهای introspection و playground را برابر با true تنظیم و سپس دیپلوی کنید: - -
-
- - {`{ - "node": { - "version": "18" - } -}`} - -
-
- - \ No newline at end of file diff --git a/src/pages/paas/nextjs/how-tos/build-and-use-es6.mdx b/src/pages/paas/nextjs/how-tos/build-and-use-es6.mdx deleted file mode 100644 index 472e7a60..00000000 --- a/src/pages/paas/nextjs/how-tos/build-and-use-es6.mdx +++ /dev/null @@ -1,33 +0,0 @@ -import Layout from "@/components/Layout"; -import Button from "@/components/Common/button"; -import Section from "@/components/Common/section"; -import Alert from "@/components/Common/alert"; -import Tabs from "@/components/Common/tab"; -import Step from "@/components/Common/step"; -import Card from "@/components/Common/card"; -import Important from "@/components/Common/important"; -import Highlight from "react-highlight"; -import Link from "next/link"; -import NextPage from "@/components/Common/nextpage"; - - -# بیلد برنامه با ES6 -
- -اگر برنامه‌ی‌تان را با ES6 و یا بالاتر نوشته‌اید و برنامه‌ی‌تان قبل از اجرا شدن، نیاز به build شدن دارد، باید یک اسکریپت دیگر با نام build تعریف کنید و دستورات لازم برای build شدن برنامه‌ی‌تان را داخل package.json تعریف کنید، برای نمونه: - -
-
- - {`{ - "scripts": { - "start": "node build/server.js", - "build": "gulp build" - } -}`} - -
-
- - - \ No newline at end of file diff --git a/src/pages/paas/nextjs/how-tos/choose-version.mdx b/src/pages/paas/nextjs/how-tos/choose-version.mdx index 7698bcb8..defd4d23 100644 --- a/src/pages/paas/nextjs/how-tos/choose-version.mdx +++ b/src/pages/paas/nextjs/how-tos/choose-version.mdx @@ -11,21 +11,14 @@ import Link from "next/link"; import NextPage from "@/components/Common/nextpage"; -# انتخاب نسخه NodeJS در لیارا +# نسخه NodeJS در پلتفرم NextJS
-در حال حاضر در لیارا، نسخه‌های زیر از NodeJS ارائه می‌شوند: +در حال حاضر در لیارا، نسخه زیر از NodeJS در پلتفرم NextJS ارائه می‌شود:
    {[ - {text: '8',}, - {text: '10',}, - {text: '12',}, - {text: '14',}, - {text: '16',}, - {text: '18',}, {text: '20 (پیش‌فرض)',}, - {text: '22',}, ].map((item, index) => (
  • -
    - -

    - برای تغییر نسخه پیش‌فرض، کافیست تا یک فایل به نام liara.json در مسیر اصلی پروژه، ایجاد کنید و قطعه کد زیر را درون آن، قرار دهید. قطعه کد زیر برای تغییر نسخه NodeJS به 18 می‌باشد: -

    -
    -
    - - {`{ - "node": { - "version": "18" - } -}`} - -
    -
    - , - <> -

    پس از بارگذاری پروژه خود در لیارا، کافیست تا در مرحله انتخاب نسخه، نسخه مورد نظر برنامه‌تان را انتخاب کنید.

    - how to choose nodejs version in liara console - -]} -/> +
    + +

    +در حال حاضر، امکان تغییر نسخه NodeJS در برنامه‌های NextJS وجود ندارد و هر برنامه NextJS پس از ساخته شدن، بر روی NodeJS v20 LTS خواهد بود. +

    +     \ No newline at end of file diff --git a/src/pages/paas/nextjs/how-tos/configure-trusted-proxy/about.mdx b/src/pages/paas/nextjs/how-tos/configure-trusted-proxy/about.mdx deleted file mode 100644 index 5ce904f2..00000000 --- a/src/pages/paas/nextjs/how-tos/configure-trusted-proxy/about.mdx +++ /dev/null @@ -1,46 +0,0 @@ -import Layout from "@/components/Layout"; -import Button from "@/components/Common/button"; -import Section from "@/components/Common/section"; -import Alert from "@/components/Common/alert"; -import Tabs from "@/components/Common/tab"; -import Step from "@/components/Common/step"; -import Card from "@/components/Common/card"; -import Important from "@/components/Common/important"; -import Highlight from "react-highlight"; -import Link from "next/link"; -import NextPage from "@/components/Common/nextpage"; -import {GoArrowLeft,} from "react-icons/go"; - - -# پیکربندی و تنظیمات TrustedProxies -
    -با توجه به این نکته که تمامی درخواست‌ها توسط reverse proxy لیارا به برنامه‌ی شما هدایت می‌شود؛ باید در زمان استفاده از فریم‌ورک‌های مختلف برای مشاهده‌ی IP واقعی کاربران و بسیاری از قابلیت‌های دیگر تعیین کنید که برنامه‌ی شما در پشت یک reverse proxy راه‌اندازی شده است. -
    -عبارت Trusted Proxies یا پروکسی‌های مورد اعتماد، به پروکسی‌هایی گفته می‌شود که سرور به آنها اعتماد دارد تا آدرس‌های IP واقعی کاربران را ارسال کنند. در بسیاری از مواقع، سرورهایی که پشت یک پروکسی معکوس (reverse proxy) قرار دارند، فقط آدرس IP پروکسی را می‌بینند و نه آدرس IP واقعی کاربران. برای رفع این مشکل و برای دلایلی مانند رهگیری، ردیابی یا اعمال سیاست‌های امنیتی، TrustedProxyها، IP واقعی کاربران را از طریق هدرهای HTTP خاصی مثل X-Forwarded-For یا X-Real-IP به سرورهای پشتی ارسال می‌کنند. -
    -how trusted proxy works -
    -در ادامه، مستندات مربوط به تنظیم TrustedProxies برای فریم‌ورک‌های مختلف، قرار گرفته است: - -
    -
    - {[ - { platform: 'فریم‌ورک ExpressJS', link: "./expressjs" }, - { platform: 'فریم‌ورک Hapi', link: "./hapi" }, - { platform: 'فریم‌ورک Koa', link: "./koa" }, - ].map(item => - - -
    -

    - {item.platform} -

    -
    - -     - - )} -
    - - - \ No newline at end of file diff --git a/src/pages/paas/nextjs/how-tos/configure-trusted-proxy/expressjs.mdx b/src/pages/paas/nextjs/how-tos/configure-trusted-proxy/expressjs.mdx deleted file mode 100644 index 4ded2734..00000000 --- a/src/pages/paas/nextjs/how-tos/configure-trusted-proxy/expressjs.mdx +++ /dev/null @@ -1,35 +0,0 @@ -import Layout from "@/components/Layout"; -import Button from "@/components/Common/button"; -import Section from "@/components/Common/section"; -import Alert from "@/components/Common/alert"; -import Tabs from "@/components/Common/tab"; -import Step from "@/components/Common/step"; -import Card from "@/components/Common/card"; -import Important from "@/components/Common/important"; -import Highlight from "react-highlight"; -import Link from "next/link"; - - -# تنظیم TrustedProxies برای فریم‌ورک ExpressJS -
    - -برای تنظیم این قابلیت در برنامه خود، می‌توانید از نمونه قطعه کد زیر، استفاده کنید: - -
    -
    - - {`const express = require('express'); -const app = express(); - -app.set('trust proxy', 1); - -// usage example: -app.get('/', (req, res) => { - const ip = req.ip; - res.send(\`Client IP: \${ip}\`); -});`} - -
    -
    - - \ No newline at end of file diff --git a/src/pages/paas/nextjs/how-tos/configure-trusted-proxy/hapi.mdx b/src/pages/paas/nextjs/how-tos/configure-trusted-proxy/hapi.mdx deleted file mode 100644 index 01605183..00000000 --- a/src/pages/paas/nextjs/how-tos/configure-trusted-proxy/hapi.mdx +++ /dev/null @@ -1,68 +0,0 @@ -import Layout from "@/components/Layout"; -import Button from "@/components/Common/button"; -import Section from "@/components/Common/section"; -import Alert from "@/components/Common/alert"; -import Tabs from "@/components/Common/tab"; -import Step from "@/components/Common/step"; -import Card from "@/components/Common/card"; -import Important from "@/components/Common/important"; -import Highlight from "react-highlight"; -import Link from "next/link"; - - -# تنظیم TrustedProxies برای فریم‌ورک Hapi -
    - -برای تنظیم این قابلیت در برنامه خود، می‌توانید از نمونه قطعه کد زیر، استفاده کنید: -
    -
    - - {`const Hapi = require('@hapi/hapi'); - -const init = async () => { - const server = Hapi.server({ - port: 3000, - host: '0.0.0.0', - routes: { - state: { - parse: true, - failAction: 'ignore' - } - } - }); - - await server.register(require('@hapi/inert')); - - server.ext('onRequest', (request, h) => { - const xForwardedFor = request.headers['x-forwarded-for']; - if (xForwardedFor) { - const ips = xForwardedFor.split(',').map(ip => ip.trim()); - request.info.remoteAddress = ips[0]; - } - return h.continue; - }); - - server.route({ - method: 'GET', - path: '/', - handler: (request, h) => { - const ip = request.info.remoteAddress; - return \`Client IP: \${ip}\`; - } - }); - - await server.start(); - console.log('Server running on %s', server.info.uri); -}; - -process.on('unhandledRejection', (err) => { - console.log(err); - process.exit(1); -}); - -init();`} - -
    -
    - - \ No newline at end of file diff --git a/src/pages/paas/nextjs/how-tos/configure-trusted-proxy/koa.mdx b/src/pages/paas/nextjs/how-tos/configure-trusted-proxy/koa.mdx deleted file mode 100644 index 3a51d5dc..00000000 --- a/src/pages/paas/nextjs/how-tos/configure-trusted-proxy/koa.mdx +++ /dev/null @@ -1,51 +0,0 @@ -import Layout from "@/components/Layout"; -import Button from "@/components/Common/button"; -import Section from "@/components/Common/section"; -import Alert from "@/components/Common/alert"; -import Tabs from "@/components/Common/tab"; -import Step from "@/components/Common/step"; -import Card from "@/components/Common/card"; -import Important from "@/components/Common/important"; -import Highlight from "react-highlight"; -import Link from "next/link"; - - -# تنظیم TrustedProxies برای فریم‌ورک Koa -
    - -برای تنظیم این قابلیت در برنامه خود، می‌توانید از نمونه قطعه کدهای زیر، استفاده کنید. - -نمونه اول: -
    -
    - - {`const Koa = require('koa'); -const app = new Koa(); -app.proxy = true; - -// usage example: -app.use(async ctx => { - const ip = ctx.request.ip; - ctx.body = \`Client IP: \${ip}\`; -});`} - -
    -
    - -نمونه دوم: -
    -
    - - {`const Koa = require('koa'); -const app = new Koa({ proxy: true }); - -// usage example: -app.use(async ctx => { - const ip = ctx.request.ip; - ctx.body = \`Client IP: \${ip}\`; -});`} - -
    -
    - - \ No newline at end of file diff --git a/src/pages/paas/nextjs/how-tos/increase-next-cache.mdx b/src/pages/paas/nextjs/how-tos/increase-next-cache.mdx new file mode 100644 index 00000000..81a49971 --- /dev/null +++ b/src/pages/paas/nextjs/how-tos/increase-next-cache.mdx @@ -0,0 +1,98 @@ +import Layout from "@/components/Layout"; +import Button from "@/components/Common/button"; +import Section from "@/components/Common/section"; +import Alert from "@/components/Common/alert"; +import Tabs from "@/components/Common/tab"; +import Step from "@/components/Common/step"; +import Card from "@/components/Common/card"; +import Important from "@/components/Common/important"; +import Highlight from "react-highlight"; +import Link from "next/link"; +import NextPage from "@/components/Common/nextpage"; + + +# افزایش فضای مسیر cache +
    + +پوشه next/cache. در پروژه‌های NextJS محلی است که برای ذخیره داده‌های کش‌شده به کار می‌رود. این داده‌ها شامل مواردی است که می‌تواند در زمان ساخت و اجرای پروژه باعث افزایش سرعت برنامه شود. + +در لیارا، مسیر ذخیره‌سازی فایل‌های کش به tmp/ متصل شده است و از آنجایی که فضای نوشتن این دایرکتوری در حالتِ پیش‌فرضِ Writable، متغیر و در حالت فایل‌سیستم ReadOnly برابر با 100MB است؛ ممکن است که به افزایش فضا برای ذخیره‌سازی کش، نیاز داشته باشید. برای این کار کافیست تا طبق مراحل زیر، عمل کنید: + + +

    ایجاد دیسک

    +

    طبق مستندات ساخت دیسک، یک دیسک با نام و اندازه دلخواه ایجاد کنید.

    + + ) + }, + { + step: "۲", + content: ( + <> +

    تعریف مسیر برای دیسک

    +

    طبق مستندات تعریف مسیر دیسک، دیسک ایجاد شده را به مسیر tmp/ متصل کنید.

    + + ) + },]}/> +
    +با انجام کارهای فوق، فضای پوشه tmp/ افزایش خواهد یافت. + +
    + +در صورتی که به دایرکتوری tmp/ دیسک متصل نکرده باشید، با هر بار استقرار جدید یا ری‌استارت شدن برنامه، تمامی فایل‌های cache شده، حذف می‌شوند. + +
    + +
    +برای اینکه بتوانید فایل‌های cache را به مدت بیشتری نگهداری کنید؛ کافیست تا قطعه کد زیر را +به فایل next.config.js اضافه کنید و مقدار فیلد revalidate را بر حسب نیاز خود، تغییر دهید: + +
    +
    + + {`module.exports = { + revalidate: 120, // 120 seconds +};`} + +
    +
    + +البته می‌توانید این مقدار را به صورت مستقیم در متد getStaticProps تنظیم کنید؛ به عنوان مثال: +
    +
    + + {`export async function getStaticProps() { + // receiving data from an API + const data = await fetch('https://api.example.com/data').then(res => res.json()); + + return { + props: { + data, + }, + revalidate: 60, // 60 seconds + }; +} +`} + +
    +
    + +
    +برای نگهداری طولانی‌تر تصاویر کش‌شده، کافیست تا فیلد minimumCacheTTL را به فایل next.config.js به شکل زیر، اضافه کنید و مقدار آن را بنا به نیاز خود، تغییر دهید: +
    +
    + + {`module.exports = { + images: { + minimumCacheTTL: 60, // 60 seconds + }, +}`} + +
    +
    + + + \ No newline at end of file diff --git a/src/pages/paas/nextjs/how-tos/reach-static-files.mdx b/src/pages/paas/nextjs/how-tos/reach-static-files.mdx new file mode 100644 index 00000000..7dd322ca --- /dev/null +++ b/src/pages/paas/nextjs/how-tos/reach-static-files.mdx @@ -0,0 +1,59 @@ +import Layout from "@/components/Layout"; +import Button from "@/components/Common/button"; +import Section from "@/components/Common/section"; +import Alert from "@/components/Common/alert"; +import Tabs from "@/components/Common/tab"; +import Step from "@/components/Common/step"; +import Card from "@/components/Common/card"; +import Important from "@/components/Common/important"; +import Highlight from "react-highlight"; +import Link from "next/link"; +import NextPage from "@/components/Common/nextpage"; + + +# دسترسی به فایل‌های Static +
    + +در NextJS می‌توانید فایل‌های استاتیک (مانند تصاویر) را در یک پوشه به نام public در مسیر اصلی پروژه قرار دهید. سپس فایل‌های موجود در مسیر public از طریق روت دامنه با شروع از / در دسترس هستند. برای مثال اگر شما یک فایل به نام example.png در پوشه‌ی public داشته باشید، می‌توانید طبق مسیر زیر به این فایل دسترسی داشته باشید: + + +
    +
    + + {`https://yourdomain.com/example.png`} + +
    +
    + +در برنامه نیز، می‌توانید با استفاده از قطعه کد مثال زیر، به عکس دسترسی داشته باشید: + +
    +
    + + {`import Image from 'next/image' + +export function Example() { + return +}`} + +
    +
    + +دایرکتوری public برای ذخیره فایل‌هایی مانند آیکون وب‌سایت، فونت‌ها، google site verification و ... مناسب است. همچنین در نظر داشته باشید که نمی‌توانید نام آن را از public به چیز دیگری، تغییر دهید و این دایرکتوری، تنها مسیری است که برای ارائه فایل‌های static، استفاده می‌شود. + +
    + +

    + فقط فایل‌های static در زمان build در برنامه نمایش داده می‌شوند و برای نمایش فایل جدید اضافه شده به برنامه، باید برنامه را مجدداً +build یا ری‌استارت کنید. +

    +     + +

    +همچنین بخوانید: استفاده از فضای ذخیره‌سازی ابری لیارا برای ذخیره عکس‌های جدید +

    +     + + + + \ No newline at end of file diff --git a/src/pages/paas/nextjs/how-tos/use-isr.mdx b/src/pages/paas/nextjs/how-tos/use-isr.mdx new file mode 100644 index 00000000..10af4e43 --- /dev/null +++ b/src/pages/paas/nextjs/how-tos/use-isr.mdx @@ -0,0 +1,77 @@ +import Layout from "@/components/Layout"; +import Button from "@/components/Common/button"; +import Section from "@/components/Common/section"; +import Alert from "@/components/Common/alert"; +import Tabs from "@/components/Common/tab"; +import Step from "@/components/Common/step"; +import Card from "@/components/Common/card"; +import Important from "@/components/Common/important"; +import Highlight from "react-highlight"; +import Link from "next/link"; +import NextPage from "@/components/Common/nextpage"; + + +# استفاده از قابلیت ISR +
    + +ISR (Incremental Static Regeneration) یکی از قابلیت‌های NextJS است که به شما اجازه می‌دهد تا صفحاتی را که به‌صورت استاتیک تولید شده‌اند، بدون نیاز به بازسازی کامل سایت، به‌روز کنید. + +از آنجایی که فضای نوشتن در حالتِ پیش‌فرضِ Writable، متغیر است و در حالت فایل‌سیستم ReadOnly فضایی برای نوشتن وجود ندارد؛ ممکن است که به افزایش فضا برای ذخیره‌سازی صفحات ساخته شده مبتنی بر ISR، نیاز داشته باشید. برای این کار کافیست تا طبق مراحل زیر، عمل کنید: + + + +

    ایجاد دیسک

    +

    طبق مستندات ساخت دیسک، یک دیسک با نام و اندازه دلخواه ایجاد کنید.

    + + ) + }, + { + step: "۲", + content: ( + <> +

    تعریف مسیر برای دیسک

    +

    طبق مستندات تعریف مسیر دیسک، دیسک ایجاد شده را به مسیر next/server/pages. متصل کنید.

    + + ) + },]}/> + , + <> + +

    ایجاد دیسک

    +

    طبق مستندات ساخت دیسک، یک دیسک با نام و اندازه دلخواه ایجاد کنید.

    + + ) + }, + { + step: "۲", + content: ( + <> +

    تعریف مسیر برای دیسک

    +

    طبق مستندات تعریف مسیر دیسک، دیسک ایجاد شده را به مسیر next/server/app. متصل کنید.

    + + ) + },]}/> + +]} +/> + +
    +با انجام کارهای فوق، فضای پوشه مدنظر، افزایش خواهد یافت. +
    + + +در صورتی که به دایرکتوری اشاره شده، دیسک متصل نکرده باشید و فایل‌سیستم بر روی Writable باشد، با هر بار استقرار جدید یا ری‌استارت شدن برنامه، تمامی فایل‌های cache شده، حذف می‌شوند. + + + \ No newline at end of file diff --git a/src/pages/paas/nextjs/how-tos/use-static-html-export.mdx b/src/pages/paas/nextjs/how-tos/use-static-html-export.mdx new file mode 100644 index 00000000..049c70bf --- /dev/null +++ b/src/pages/paas/nextjs/how-tos/use-static-html-export.mdx @@ -0,0 +1,114 @@ +import Layout from "@/components/Layout"; +import Button from "@/components/Common/button"; +import Section from "@/components/Common/section"; +import Alert from "@/components/Common/alert"; +import Tabs from "@/components/Common/tab"; +import Step from "@/components/Common/step"; +import Card from "@/components/Common/card"; +import Important from "@/components/Common/important"; +import Highlight from "react-highlight"; +import Link from "next/link"; +import NextPage from "@/components/Common/nextpage"; + + +# استفاده از قابلیت Static HTML Export +
    + +قابلیت Static HTML Export به شما اجازه می‌دهد تا یک وب‌سایت کاملاً استاتیک ایجاد کنید که می‌تواند بدون نیاز به سرور NodeJS اجرا شود. +این قابلیت مناسب صفحه‌های landing، وبلاگ‌ها، سامانه‌های خبری و وب‌سایت‌های این‌چنینی هست و از امکانات زیر نیز، پشتیبانی می‌کند: + +
      +
    • Dynamic Routes
      • +
    • Prefetching
      • +
    • Preloading JavaScript
      • +
    • Dynamic Imports
      • +
    • getStaticProps
      • +
    • getStaticPaths
      • +
    + +برای استفاده از این قابلیت، باید در Local وارد فایل next.config.js شوید و مقدار فیلد output را به شکل زیر، بنویسید: + +
    +
    + + {`/** @type {import('next').NextConfig} */ +const nextConfig = { + output: 'export', + // distDir: 'dist', // optional, changes the output dir from 'out' to 'dist' +} + +module.exports = nextConfig +`} + +
    +
    + +در ادامه، کافیست تا دستور npm run build را در Local اجرا کنید تا دایرکتوری out یا همان دایرکتوری شامل فایل‌های Static برای‌تان ایجاد شود. + +
    +برای استقرار خروجی نهایی برنامه در لیارا، کافیست تا طبق مستندات ساخت برنامه‌های Static یک برنامه static در لیارا ایجاد کنید. + + +

    + در نهایت کافیست تا دستور زیر را اجرا کنید تا برنامه شما در لیارا مستقر شود: +

    +
    +
    + + {`liara deploy --path out`} + +
    +
    + بعد از path-- بایستی اسم دایرکتوری نهایی را وارد کنید که به صورت پیش‌فرض out است. + , + <> +

    + در نهایت، کافیست تا دایرکتوری نهایی را درون یک فایل zip قرار داده و در باکس آپلود تعبیه شده در کنسول، درج کنید و سپس عملیات استقرار را جلو ببرید. +

    + +]} +/> + + +
    +قابلیت بهینه‌سازی عکس به صورت پیش‌فرض به یک سرور NodeJS نیاز دارد و در محیط Static، قابل استفاده نیست. +بنابراین باید این قابلیت را در فایل next.config.js به شکل زیر، غیر فعال کنید: +
    +
    + + {`/** @type {import('next').NextConfig} */ +const nextConfig = { + output: 'export', + // distDir: 'dist', // optional, changes the output dir from 'out' to 'dist' + images: { + unoptimized: true + } +} + +module.exports = nextConfig +} +`} + +
    +
    + +
    +به صورت کلی، امکاناتی که به یک سرور NodeJS یا یک منطق dynamic که در زمان بیلد برنامه نمی‌تواند پردازش شود؛ نیاز دارند؛ +در قابلیت Static HTML Export پشتیبانی نمی‌شوند، نظیر: + +
      +
    • API Routes
      • +
    • Redirectها
      • +
    • هدرها
      • +
    • Middlewareها
      • +
    • getStaticPaths با fallback:true
      • +
    • getServerSideProps
      • +
    + + + + + \ No newline at end of file diff --git a/src/pages/paas/nextjs/how-tos/use-type-script.mdx b/src/pages/paas/nextjs/how-tos/use-type-script.mdx index c93fc491..b0b46265 100644 --- a/src/pages/paas/nextjs/how-tos/use-type-script.mdx +++ b/src/pages/paas/nextjs/how-tos/use-type-script.mdx @@ -32,5 +32,5 @@ import NextPage from "@/components/Common/nextpage";
    - + \ No newline at end of file diff --git a/src/pages/paas/nextjs/how-tos/use-websocket.mdx b/src/pages/paas/nextjs/how-tos/use-websocket.mdx index 4f41ff24..47083988 100644 --- a/src/pages/paas/nextjs/how-tos/use-websocket.mdx +++ b/src/pages/paas/nextjs/how-tos/use-websocket.mdx @@ -164,7 +164,7 @@ export default function Home() {
    از آنجایی که برنامه WebSocket فوق (یا به صورت کلی، اکثر برنامه‌های مبتنی بر Websocket) به یک سرور برای مدیریت Socket نیاز دارند؛ بنابراین -برای استقرار این برنامه در لیارا، بهتر است که از پلتفرم NodeJS برای استقرار برنامه NextJS مبتنی بر وب‌سوکت استفاده شود. +برای استقرار این برنامه در لیارا، بهتر است که از پلتفرم NodeJS استفاده شود. برای این کار کافیست تا طبق مستندات ساخت برنامه NodeJS یک برنامه NodeJS ایجاد کنید و اسکریپت start درون فایل package.json خود را به شکل زیر، تغییر دهید: