آموزش ایجاد یک برنامه NextJS برای مبتدیان

NextJS یک است متن باز توسعه وب چارچوب که ویژگی های گسترده ای را در اختیار ما قرار می دهد ReactJS و بلوک های ساختمانی برای ایجاد برنامه های کاربردی وب را به ما می دهد. در این مقاله چند نکته مهم در مورد NextJS و همچنین ساختن نمونه برنامه NextJS از ابتدا توضیح خواهم داد.

ویژگی های NextJS:

در زیر برخی از ویژگی های موثر NextJS وجود دارد که به آن برتری نسبت به سایر فناوری های توسعه وب می دهد:

• سیستم مسیریابی مبتنی بر صفحه: با NextJS، برای استفاده از Routing در پروژه های خود، نیازی به نصب بسته خارجی از NPM یا YARN نداریم (مانند نصب react-router-dom در React). ما فقط یک صفحه در یک پوشه خاص ایجاد می کنیم و NextJS یک مسیر برای آن صفحه ایجاد می کند.

• پیش رندر: NextJS از هر دو پشتیبانی می کند تولید سایت استاتیک (SSG) و رندر سمت سرور (SSR). رندر سمت سرور (SSR) محتوای یک صفحه را در سرور آماده می کند، در حالی که یک برنامه React یک صفحه ای از آن استفاده می کند. رندر سمت مشتری (CSR). مشکل CSR این است که اینطور است سئو دوستانه نیست زیرا موتورهای جستجو محتوای واقعی صفحه را نمی بینند. استفاده از SSR در NextJS می‌تواند از چنین مشکلاتی جلوگیری کند صفحه سوسو زدن در حالی که داده ها واکشی می شوند، و محتوای وب سایت ما سئو دوستانه خواهد بود.

• پشتیبانی داخلی CSS و Sass: NextJS از هر کتابخانه CSS-in-JS پشتیبانی می کند.

• تقسیم کد: NextJS به توسعه دهندگان این امکان را می دهد تا کد برنامه خود را بین 2 مؤلفه مختلف تقسیم کنند – جزء سرور و مؤلفه مشتری. تمام کدهای مربوط به Backend یعنی مدیریت API، یکپارچه سازی پایگاه داده و واکشی داده ها باید در اجزای سرور نوشته شوند در حالی که همه کدهای مربوط به رابط کاربری باید در مؤلفه های مشتری نوشته شوند.

• اجزای دینامیک: با استفاده از NextJS می‌توانیم ماژول‌های جاوا اسکریپت و اجزای React را به صورت پویا وارد کنیم.

ایجاد برنامه NextJS خودمان از ابتدا

برای این آموزش، من فرض می کنم که شما دارید Node.js و NPM در سیستم شما نصب شده است. اگر نه، می توانید مراحل ذکر شده در اینجا را دنبال کنید – https://radixweb.com/blog/installing-npm-and-nodejs-on-windows-and-mac

من استفاده خواهم کرد ویرایشگر کد ویژوال استودیو برای نوشتن و حفظ کدم می توانید از هر ویرایشگری که می خواهید استفاده کنید، اما اگر می خواهید آن را نصب و پیکربندی کنید، مراحل ذکر شده در اینجا را دنبال کنید – https://code.visualstudio.com/learn/get-started/basics

حالا بیایید با ایجاد اپلیکیشن خود شروع کنیم!

مرحله 1: ایجاد یک برنامه NextJS با استفاده از ایجاد برنامه بعدی.
ما قبلاً می دانیم که می توانیم یک برنامه ReactJS با استفاده از ایجاد-واکنش-برنامه فرمان ایجاد یک برنامه NextJS خیلی متفاوت نیست، زیرا می توانیم از آن استفاده کنیم ایجاد برنامه بعدی فرمان

دستور زیر را در ترمینال خود وارد کنید:

npx create-next-app blog-app

با تایپ این دستور، چندین سوال در مورد راه اندازی پروژه از شما پرسیده می شود. پس از پاسخ به تمام سوالات، یک برنامه NextJS جدید بر اساس نیازهای شما ایجاد می شود.

گام 2 : باز کردن برنامه در VS Code و مشاهده ساختار پوشه.
به پوشه ای که برنامه شما در آن قرار دارد بروید، در هر نقطه راست کلیک کنید و این گزینه ها را مشاهده خواهید کرد:

را کلیک کنید Git Bash در اینجا. یک ترمینال Git Bash باز می شود، دستور زیر را تایپ کنید:

code .

برنامه NextJS شما اکنون در VS Code باز می شود. اکنون می توانید ساختار پوشه را ببینید:

فایل ها و پوشه های زیر را مشاهده خواهید کرد:

• next.config.js: این فایل پیکربندی برای NextJS است.

• jsconfig.json: این فایل پیکربندی جاوا اسکریپت است.

• .gitignore: این شامل فایل‌ها و پوشه‌های Git برای نادیده گرفتن است.

• .eslintrc.json: این فایل پیکربندی برای ESLint است.

• src: این پوشه منبع اختیاری برنامه است.

• برنامه: این روتر برنامه است.

• عمومی: این شامل دارایی های ثابتی است که باید ارائه شوند.

• layout.js: این شامل طرح بندی مشترک برنامه است.

• package.json: این شامل وابستگی ها و اسکریپت های پروژه است.

مرحله 3: برنامه NextJS خود را اجرا کنید.
با استفاده از این دستور به دایرکتوری پروژه خود بروید:

cd blog-app

برنامه خود را با استفاده از دستور زیر اجرا کنید:

npm run dev

در مرورگر خود، به http://localhost:3000 برای مشاهده درخواست شما
این باید خروجی روی صفحه نمایش شما باشد:

مرحله 4: ایجاد تغییرات در اپلیکیشن
رفتن به src/app/page.js، کد موجود در فایل را با کد زیر جایگزین کنید:

import Image from 'next/image'
import styles from './page.module.css'

export default function Home() {
  return (
    <main className={styles.main}>
      <h1>Welcome to your first NextJS Application!</h1>
    </main>
  );
};

خروجی زیر را روی صفحه خواهید دید:

مرحله 5: ایجاد چندین مسیر برای برنامه
همانطور که قبلاً گفته شد، NextJS از a پشتیبانی می کند مبتنی بر فایل سیستم مسیریابی برای استفاده از مسیریابی در برنامه خود نیازی به نصب بسته خارجی نداریم.
در این مرحله نحوه ایجاد 2 مسیر برای وبلاگ خود را به شما نشان خواهم داد
کاربرد – لوکال هاست: 3000/اولین پست & لوکال هاست: 3000 در پست دوم

رفتن به src/app، و 2 پوشه جدید ایجاد کنید – اولین پست و پست دوم. در داخل هر دو پوشه، یک فایل جدید ایجاد کنید page.js.

رفتن به src/app/first-post/page.jsو کد زیر را در آن بنویسید:

"use client"
import Link from "next/link";

function FirstPost(){
    return(
        <>
            <h1 style={{color : "#fff", position : 'absolute', top : '55%', left : '22%'}}>When to Use Static Generation v.s. <br/>Server-side Rendering</h1>
            <p style={{color : 'lightgray', fontSize : '15px', position : 'absolute', top : '68%', left : '22%'}}>June 19, 2023</p>

            <p style={{color : "#fff", position : 'absolute', top : '73%', left : '22%', fontSize : '19px'}}>We recommend using <b>Static Generation</b> (with and without data) whenever <br/>
            possible because your page can be built once and served by CDN, <br/>
            which makes it much faster than having a server render the page on every request.</p>

            <p style={{color : "#fff", position : 'absolute', top : '87%', left : '22%', fontSize : '19px'}}>You can use Static Generation for many types of pages, including:</p>

            <ul style={{color : "#fff", position : 'absolute', top : '93%', left : '25%', fontSize : '19px'}}>
                <li>Marketing pages</li>
                <li>Blog Posts</li>
                <li>E-commerce product listings</li>
                <li>Help and documentation</li>
            </ul>

            <p style={{color : "#fff", position : 'absolute', top : '110%', left : '22%', fontSize : '19px'}}>You should ask yourself: "Can I pre-render this page <b>ahead</b> of a user's <br/>
            request?" If the answer is yes, then you should choose Static Generation.</p>

            <p style={{color : "#fff", position : 'absolute', top : '120%', left : '22%', fontSize : '19px'}}>On the other hand, Static Generation is <b>not</b> a good idea if you cannot pre-<br/>
            render a page ahead of a user's request. Maybe your page shows frequently <br/>
            updated data, and the page content changes on every request.</p>

            <p style={{color : "#fff", position : 'absolute', top : '133%', left : '22%', fontSize : '19px'}}>In that case, you can use <b>Server-Side Rendering</b>. It will be slower, but the <br/>
            pre-rendered page will always be up-to-date. Or you can skip pre-rendering <br/>
            and use client-side JavaScript to populate data.</p>

            <Link href="https://dev.to/" style={{color : 'blue', position : 'absolute', top : '147%', left : '22%'}}>← Back to home</Link>

            <br/>
            <br/>
        </>
    );
};

export default FirstPost;

در مرورگر خود از http://localhost:3000/first-post دیدن کنید و این خروجی را خواهید دید:

شما اولین مسیر خود را ایجاد کرده اید اولین پست!

حالا برو به src/app/second-post/page.jsو کد زیر را در آن بنویسید:

"use client"
import Link from "next/link";

function SecondPost(){
    return(
        <>
            <h1 style={{color : "#fff", position : 'absolute', top : '55%', left : '22%'}}>Two Forms of Pre-rendering</h1>
            <p style={{color : 'lightgray', fontSize : '15px', position : 'absolute', top : '62%', left : '22%'}}>April 15, 2023</p>

            <p style={{color : "#fff", position : 'absolute', top : '67%', left : '22%', fontSize : '19px'}}>Next.js has two forms of pre-rendering: <b>Static Generation</b> and <b>Server-side <br/>
            Rendering</b>. The difference is in when it generates the HTML for a page.</p>

            <ul style={{color : "#fff", position : 'absolute', top : '77%', left : '25%', fontSize : '19px'}}>
                <li><b>Static Generation</b> is the pre-rendering method that generates the <br/>
                HTML at <b>build time</b>. The pre-rendered HTML is then reused on each <br/>
                request.
                </li>
                <li><b>Server-side Rendering</b> is the pre-rendering method that generates the <br/>
                HTML on <b>each request.</b></li>
            </ul>

            <p style={{color : "#fff", position : 'absolute', top : '97%', left : '22%', fontSize : '19px'}}>Importantly, Next.js lets you <b>choose</b> which pre-rendering form to use for <br/>
            each page. You can create a "hybrid" Next.js app by using Static Generation <br/>
            for most pages and using Server-side Rendering for others.</p>

            <Link href="https://dev.to/" style={{color : 'blue', position : 'absolute', top : '110%', left : '22%'}}>← Back to home</Link>

            <br/>
            <br/>
        </>
    );
};

export default SecondPost;

در مرورگر خود از http://localhost:3000/second-post دیدن کنید و این خروجی را خواهید دید:

شما مسیر دوم خود را ایجاد کرده اید پست دوم!

مرحله 6: در حال ویرایش صفحه اصلی
رفتن به src/app/page.jsو کد زیر را در آن بنویسید:

import Link from "next/link";
import "./page.module.css"

export default function Home() {
  return (
    <main>

      <p style={{color : "#fff", position : 'absolute', top : '67%', left : '30%', fontSize : '20px'}}>Hello World!</p>


      <h1 style={{color : "#fff", position : 'absolute', top : '83%', left : '30%'}}>Blog</h1>

      <ul style={{position : 'absolute', top : '91%', left : '30%', fontSize : '21px'}}>
        <li>
            <p style={{color : 'blue'}}><Link href="https://dev.to/first-post">When to use Static Generation v.s. Server-Side Rendering</Link></p>
            <br/>
            <p style={{color : 'lightgray', fontSize : '15px'}}>June 19, 2023</p>
        </li>
        <br/>
        <li>
            <p style={{color : 'blue'}}><Link href="http://dev.to/second-post">Two forms of Pre-Rendering</Link></p>
            <br/>
            <p style={{color : 'lightgray', fontSize : '15px'}}>April 15, 2023</p>
        </li>
      </ul>
    </main>
  );
};

در مرورگر خود، از http://localhost:3000/ دیدن کنید، این خروجی را خواهید دید:

و بس!! شما اولین برنامه NextJS خود را با موفقیت ایجاد کردید!

اکنون، گام بعدی و نهایی ما این است که آن را در آن مستقر کنیم Vercel

ورسل یک آمریکایی است پلت فرم ابری به عنوان یک سرویس شرکت. چارچوب توسعه وب NextJS را حفظ می کند. ابر فرانت‌اند آن به توسعه‌دهندگان چارچوب‌ها، جریان‌های کاری و زیرساخت‌ها را می‌دهد تا یک برنامه وب سریع‌تر و شخصی‌تر بسازند. ما می توانیم برنامه NextJS خود را در عرض چند دقیقه در Vercel مستقر کنیم.

مرحله 1: کد برنامه NextJS خود را به Github فشار دهید.
به https://github.com/ بروید و یک مخزن به نام ایجاد کنید nextjs-blog.

ترمینال خود را در VS Code باز کنید و دستورات زیر را بنویسید:

git init

git add.

git commit -m "Initial Commit"

git remote add origin https://github.com/<Your Username>/nextjs-blog.git

git push -u -f origin master

شما با موفقیت کد خود را به Github ارسال کردید!
مخزن شما در حال حاضر باید به شکل زیر باشد:

گام 2 : یک حساب Vercel ایجاد کنید
ابتدا به https://vercel.com/signup?utm_source=next-site&utm_medium=learnpages&utm_campaign=no-campaign بروید تا یک حساب Vercel ایجاد کنید. انتخاب کنید با GitHub ادامه دهید و مراحل ثبت نام را طی کنید.

مرحله 3: مخزن خود را وارد کنید
پس از ثبت نام، خود را وارد کنید nextjs-blog مخزن در Vercel.

• شما نیاز دارید Vercel را برای GitHub نصب کنید. می توانید به آن دسترسی داشته باشید همه مخازن.

• هنگامی که Vercel را نصب کردید، وارد کنید nextjs-blog.

مرحله 4: برنامه خود را مستقر کنید
شما می توانید استفاده کنید مقادیر پیش فرض برای تنظیمات زیر – نیازی به تغییر چیزی نیست. Vercel به طور خودکار تشخیص می دهد که شما یک برنامه Next.js دارید و انتخاب می کند تنظیمات ساخت بهینه برای شما.

• نام پروژه

• دایرکتوری ریشه

• دستور ساخت

• فهرست خروجی

• فرماندهی توسعه

وقتی استقرار می‌کنید، برنامه Next.js شما شروع به ساخت می‌کند. باید در کمتر از یک دقیقه تمام شود.

وقتی تمام شد، دریافت خواهید کرد URL های استقرار. روی یکی از URL ها کلیک کنید و باید آن را ببینید صفحه شروع برنامه به صورت زنده.

اینجا نمونه URL برنامه NextJS من است که در Vercel مستقر شده است – https://nextjs-technical-blog-website.vercel.app/

و بس! شما با موفقیت یاد گرفتید که چگونه یک برنامه NextJS را ایجاد و اجرا کنید!

با من در لینکدین ارتباط برقرار کنید: – لینکدین

Github من را برای پروژه های شگفت انگیز بررسی کنید: – Github

نمونه کارها شخصی من را مشاهده کنید: – نمونه کارها آریان