Прыкладная Рэагаваць SEO на Next.js App [Дэма]

Што такое Next.js?
Апрацоўка React.js SEO
Next.js Падручнік: Праца з SEO на React.js SPA
1. Стварэнне структуры праекта
2. дражніла архітэктуры рэальнага праекта з Redux
3. Напісанне і рэндэрынгу прадуктаў
4. Стварэнне статычных файлаў для React SEO
5. Разгортванне статычных актываў
Жывая дэманстрацыя і GitHub РЭПО
Іншыя важныя меркаванні агульнай SEO
закрыццё думкі

У спешцы? прапусціць падручнік крокі або дэма ,

Не так даўно, адзін распрацоўшчык мой расказваў мне пра новую электроннай камерцыі праекта для кліента.

«Я б хацеў, каб выкарыстоўваць прыкладанне React.js, калі толькі гэта не было для ўсіх гэтых пытанняў SEO».

ўздыхаць

Я думаў, што ўжо пераканаў яго з маім раней пасаду на Vue.js (або вось гэты з Кутнім) , што SEO з рамкамі JS быў кіраваным.

Я думаю, не! Таму я пачаў з нуля, і растлумачыў свайму сябру , як звяртацца з SEO з React SPA.

Сёння я стаўлю мой адказ на яго ў словах, выкарыстоўваючы Next.js вырабе гусенічны дружалюбных электроннай камерцыі SPA.

У гэтым уроку я буду:

Стварэнне праекта Next.js.
Выкарыстоўвайце React / Redux прывязак.
Напісаць і візуалізацыі прадуктаў.
Генерацыя статычных файлаў для SEO.
Разгортванне маіх статычных актываў з Netlify.

Перад тым, як практычныя, давайце разгледзім трохі тэорыі.

Што такое Next.js?

У двух словах, Next.js ўяўляе сабой лёгкі каркас для статычных і серверных прыкладанняў візуалізацыі React.

Не варта блытаць яго з Nuxt, якая з'яўляецца асновай для Універсальны Vue.js прыкладанне -Вообще натхнёны Next. Яны маюць вельмі падобныя мэты.

Да цяперашняга часу, вы павінны, па меншай меры, чулі пра Рэагаваць, але дзеля яснасці, мы вызначым яго як кампанент на аснове бібліятэкі JavaScript для пабудовы інтэрфейсаў.

І што ж мы маем на ўвазе пад Універсальнай JavaScript? Ну, гэта ставіцца да прыкладанняў, дзе JavaScript працуе як на кліенце і серверы. Гэта выдатна, як для працы ў нагрузцы і SEO мэтаў першай старонкі, як мы ўбачым у дадзены момант.

Далей таксама мае прахалоднае набор функцый, уключаючы аўтаматычны код расшчапленню, простую бок кліента маршрутызацыю, WebPack на аснове асяроддзе распрацоўкі і любую рэалізацыю сервера Node.js. Ён таксама можа быць выкарыстаны ў якасці статычны генератар сайта ,

Не дзіўна, што буйныя кампаніі, такія як Netflix, Ticketmaster, і GitHub ня ўжо выкарыстоўваюць яго.

Апрацоўка React.js SEO

Што здарылася з SEO ў React АГР? Як і многія іншыя рамкі вонкавага інтэрфейсу, візуалізацыя выконваецца дынамічна з дапамогай JavaScript. Пошукавыя робаты затым з цяжкасцю паўзе асінхронныя ўтрыманне нашых старонак прыводзіць да зніжэння SEO выступаў.

Пошукавая аптымізацыя ў цяперашні час з'яўляецца вельмі канкурэнтнай поле і невялікія памылкі могуць каштаваць вашага бізнесу ў цэлым шмат трафіку.

Давайце паглядзім, як мы можам гэта выправіць!

Як я магу праверыць , калі маё ўтрыманне SPA правільна выпаўз?

Я прапаную вам бегчы Fetch , як Google з вынікаў пошуку Google у кансолі на кожнай ключавой старонцы вашага сайта.

Назва гаворыць сама за сябе, але вы можаце выкарыстоўваць гэты інструмент, каб пераканацца, што робаты знаходзяць сваё ўтрыманне. Ён скажа вам, калі ён сапраўды можа атрымаць доступ да старонкі, як яна робіць гэта і ці будзе якое-небудзь з старонак рэсурсаў (малюнак або скрыпты) блакуецца для Googlebot.

Калі вы выявіце, што JS дынамічны рэндэрынг выклікае любую перашкоду да пошукавай поўзае, вы можаце хутка дзейнічаць на яго.

Як я магу пераканацца , што маё ўтрыманне выпаўз?

Як я ўжо высветліў, з Vue.js, ёсць некалькі спосабаў вырашэння гэтай праблемы. У гэтым выпадку адказ прыйдзе з Next.js.

Усё, што вам трэба вызначыць правільны падыход для вашых канкрэтных патрэбаў:

→ На баку сервера візуалізацыі. Ва ўсталёўцы SSR, вы разгружаючы працэс для ўнутранага інтэрфейсу візуалізацыі. Што затым вяртаецца кліенту цалкам рендеренной выглядам HTML, саслабляючы логіку на вэб-інтэрфейсе. Па гэтай прычыне, гэты падыход выдатна падыходзіць для адчувальнага часу прыкладанняў.

→ Стварэнне статычных файлаў. Гэты лёгкі працэс выконвае дзеянне загрузкі ўсіх вашых актываў у статычны HTML для шукальнікі атрымліваць асалоду ад. Ён выконвае толькі для старонак, якія запытваюцца ботамі, каб яны не блакаваліся ўсе JavaScript, у адваротным выпадку (для звычайных карыстальнікаў) усё загружаецца як звычайна.

→ Іншыя інструменты, такія як SPA Plugin Папярэдне апрацоўваць & Prerender.io таксама робіць выгляд той жа сам працэс , як апошнія, з выдатнымі вынікамі.

Для гэтай дэманстрацыі, я вырашыў пайсці са статычным генерацыі файлаў, паколькі ён не патрабуе сервераў, які непасрэдна адпавядае з логіка JAMstack ,

Каб даведацца больш аб гэтых падыходах рэндэрынгу, глядзець гэта дбайныя видеоурки , Гэта было зроблена для Vue.js, але паняцці дастасавальныя да React.js.

Next.js Падручнік: Праца з SEO на React.js SPA

перадумова

1. Стварэнне структуры праекта

Давайце пачнем з нуля тут. Стварыць новую тэчку, дзе заманецца вы і выканайце наступныя каманды:

Ная ініцыялізацыя NPM ўсталяваць --save наступных НПЙ ўсталяваць --save спрацоўвае NPM ўсталяваць --save рэагуе-дом NPM інсталяцыю --save перевождь NPM ўсталяваць --save рэагуе-перевождь

Цяпер, калі ў мяне ёсць неабходная залежнасць, давайце напішам фактычную структуру файла.

каранёвыя ├───components ├───lib └───pages

2. дражніла архітэктуры рэальнага праекта з Redux

Я хачу, каб зрабіць гэтую дэманстрацыю як мага больш рэалістычна. Такім чынам, нават калі ён будзе адчуваць сябе крыху надуманых для нашага выпадку выкарыстання, я вырашыў выкарыстаць Redux з Рэагаваць / Redux прывязак.

Пазней я абвяшчу магазін з прадуктамі, як зыходны стан, але не якіх-небудзь дзеянняў і аднаўляльнікаў. Гэта зроблена толькі так вы атрымаеце як мага бліжэй да архітэктуры рэальным жыцці.

Пералёт у тэчцы старонкі і стварыць _app.js файл, які з'яўляецца цалкам новым дадаткам да Next-it'll працаваць толькі калі вы карыстаецеся версіі 6 і вышэй.

Гэта дазваляе старонцы пераходы, межы памылак, і многія іншыя. У маім выпадку, я буду выкарыстоўваць яго, каб напісаць новы фармат App, які выкарыстоўвае React / Redux пастаўшчыка, так што ён ўпырсквае магазін Redux ў маіх кампанентах.

Адмова ад адказнасці: гэтая архітэктура моцна натхнёная гэта наступны з Redux дэма ,

Вось зьмест майго файла:

імпарту прыкладання, {} Кантэйнер з 'Наступны / дадатак' імпарту з React '' рэагуюць на імпарт withReduxStore з '' ../lib/with-redux-store імпарту {Provider} з класа 'рэагуюць-Redux' MyApp пашырае прыкладанне {візуалізацыі ( ) {{канстантнасцю кампаненты, pageProps, reduxStore} = this.props вяртанне (<Кантэйнер> <Правайдэр магазін = {reduxStore}> <DIV ID = "асноўныя"> <h1 = імя класа "назва"> крама Вострых брылёў </ h1 > <Component {...} pageProps /> <DIV> <р> SEO-дружалюбныя Next.js дадатак з <a href="https://snipcart.com/"> Snipcart </a> прыведзены ў краму. < A HREF = "https://github.com/snipcart/next-snipcart"> [Глядзі код] </a> <A HREF = "https://snipcart.com/blog/react-seo-nextjs-tutorial «> [Чытаць поўны падручнік] </a> </ p> </ DIV> </ DIV> </ Provider> </ Container>)}} экспарту па змаўчанні withReduxStore (MyApp)

Як вы можаце бачыць, я забяспечваю магазін да майго пастаўшчыку і перадаць бягучы рэквізіт старонкі для бягучага кампанента.

Я не экспартаваць кампанент наўпрост, але я называю withReduxStore з MyApp ў якасці параметру замест гэтага. Вы павінны апрацаваць гэтую функцыю, паколькі яна не існуе ў дадзены момант.

Гэта, безумоўна, самая складаная функцыя. Для гэтай пасады, я не буду тлумачыць падрабязна, як гэта крыху больш прасунуты і складаны раздзел служыць толькі, калі вы павінны былі выкарыстоўваць на боку сервера візуалізацыі. Як я буду генераваць статычныя актывы, усё гэта павінна быць у парадку.

Так, хмель ў вашым / LIB тэчку і стварыць з-перевождь-store.js файл з наступным зместам:

імпарт App з 'наступны / дадатак' імпарту {initializeStore} ад '../store' сопзЬ isServer = акно TYPEOF === 'не вызначана' Const __NEXT_REDUX_STORE__ = функцыя '' __NEXT_REDUX_STORE__ getOrCreateStore (InitialState) {// Заўсёды рабіце новы магазін, калі сервер, у адваротным выпадку стан размяркоўваецца паміж запытамі, калі (isServer) {вярнуцца initializeStore (InitialState)} // Захоўваем ў глабальнай зменнай, калі кліент, калі (! акно [__ NEXT_REDUX_STORE__]) {акно [__ NEXT_REDUX_STORE__] = initializeStore (InitialState)} вяртанне акно [__ NEXT_REDUX_STORE__ ]} экспарту па змаўчанні (App) => {вяртанне класа Redux пашырае React.Component {статычныя асінхронныя getInitialProps (кантэкст прыкладання) {сопзЬ reduxStore = getOrCreateStore () // Забяспечыць магазін getInitialProps старонак appContext.ctx.reduxStore = reduxStore хай appProps = {} калі (App.getInitialProps) {appProps = чакаюць App.getInitialProps ()} кантэксту прыкладання вяртання {... appProps, initialReduxState: reduxStore.getState ()}} канструктар (рэквізіту) {супер (рэквізіту) this.reduxStore = getOrCreateStore ( рэквізіт. initialReduxState)} візуалізацыі () {вяртанне <App {...} this.props reduxStore = {this.reduxStore} />}}}

У асноўным, гэта правярае, калі прыкладанне працуе на сэрвэры ці ў браўзэры, а затым вырашае, ці варта падаваць новы Redux магазін асобнік або бягучы. Пасля таго, як гэта вызначана, я даю яго кампаненту App у якасці апоры.

Гэта дасць вам доступ да крамы ў кожным кампаненце верхняга ўзроўню.

Імпарт initializeStore, які з'яўляецца апошняй часткай «» кіравання дадзенымі «» неабходны, перш чым скакаць у прадуктах. Стварыце файл store.js непасрэдна ў каранёвай тэчцы.

імпарт {createStore} з 'Redux' экспарту канстантнасцю actionTypes = {} канстантнасцю InitialState = {прадукты: [{імя: 'Мой першы прадукт', цана: 50, апісанне: 'Я люблю чарапах', малюнак: 'URL', ідэнтыфікатар: 1}, {імя: 'Мой другі прадукт', цана: 100, апісанне: 'Мне падабаецца zonks', малюнак: 'URL', ідэнтыфікатар: 2}, {імя: 'Мой трэці прадукт', цана: 150, апісанне: 'Я люблю драконаў', малюнак: 'URL', ідэнтыфікатар: 3}]} // рэдуктара экспарту канстантнасцю рэдуктара = (стан = InitialState, дзеянне) => {перамыкач (action.type) {па змаўчанні: вяртае стан}} функцыя экспарту initializeStore (InitialState = InitialState) {вярнуць createStore (рэдуктар, InitialState)}

Як ужо згадвалася раней, у краме голыя косткі. Гэта сапраўды проста канкрэтызуе з пачатковым станам, але не дае нічога іншага. Вы ўсё яшчэ не размяшчаць прадукты там, паколькі гэта дае рэалістычнае адчуванне, як атрымаць доступ да дадзеных ў кампанентах я вызначаю ў наступным кроку.

3. Напісанне і рэндэрынгу прадуктаў

Для гэтай дэманстрацыі, я хачу два розных кампанента, а products.js, які будзе аказваць спасылку на кожны прадукт, і product.js, якія будуць паказваць кожны дэталь прадукту.

Напішыце кожны з іх у кампанентах / тэчцы.

Прадукты адзін будзе крыху больш складана, так як ён неабходны для доступу ў краму Redux, але абодва яны застаюцца простымі, паколькі яны з'яўляюцца функцыянальнымі кампанентамі. Яны толькі робяць тое, што яны атрымліваюць у якасці рэквізіту, такім чынам, яны могуць быць толькі прадстаўлены ў выглядзе функцыі без пашырэння нічога.

Вось кампанент Прадукцыі:

імпарт Спасылка з 'побач / спасылкай' константного ProductLink = (рэквізіт) => (<DIV = імя клас "прадукт"> <Link, как = { `/ прадукт / $ {props.id}`} HREF = { `/ прадукт? ідэнтыфікатар = $ {props.id}} `> <a> <IMG SRC = {props.image} = {Alt} props.name вышыня = '250' = імя класа" Драбніца "/> <р> {props.description} < / p> <p> {props.name} </ p> </a> </ Спасылка> </ DIV>) вар прадукты = ({прадукты}) => (<DIV> <DIV імя класа = "прадукты"> {products.map (рэквізіт => (<ProductLink ключ = {props.id} {...} рэквізіт />))} </ div> </ div>) экспарт па змаўчанні прадуктаў

А цяпер вось product.js:

экспарту па змаўчанні (рэквізіту) => (е <DIV = "імя класа прадукту"> <a className="product" href={props.url }> <IMG SRC = {props.image} альт = {props.name} = імя класа "Драбніца" /> <р> {props.name} </ р> </a> <-элемент-дадзеных імя кнопкі = імя класа "snipcart-надбудова элемент" = {props.name} элемент-дадзеных ідэнтыфікатар = { props.id} элемент дадзеных вобраз = {props.image} элемент дадзеных, URL = '/' элемент дадзеных, цана = {props.price}> купі {props.price} $ </ кнопка> < / DIV>)

Цяпер, калі ў вас ёсць гэтыя два кампаненты, вы павінны выкарыстоўваць іх у маршрутах, такім чынам яны могуць адлюстроўваць дадзеныя.

Для гэтага стварыць два новых файла ў тэчцы, на старонках index.js і product.js.

Першы з іх складаецца ў наступным:

імпарт Рэагаваць з «рэагаваць» імпарту {падлучэння} ад «рэагаваць-Redux» імпартнай прадукцыі з імпартнай кіраўніка »../ components / products 'з" побач / галава "клас Index пашырае React.Component {рэндэрынг () {вяртанне (<DIV > <Head> <спасылка HREF = "/ статычны / main.css" отн = "Табліца стыляў" /> <META NAME = "назва" змест = "востраканечны Блайндера электроннай камерцыі" /> <META NAME = "апісанне" змест = 'Знайсці лепшыя вырабы Вострыя брылі онлайн.' /> </ HEAD> <прадукты {...} this.props /> </ DIV>)}} Const mapStateToProps = (стан) => ({прадукты: state.products }) экспарту па змаўчанні падлучэння (mapStateToProps) (індэкс)

Што React / Redux робіць гэта, замест таго, каб дазволіць вам доступ у краму Redux непасрэдна, гэта дае вам злучаць функцыю, даючы вам магчымасць супаставіць дзяржаўную частку ў якасці апоры. Хоць гэта і не зроблена тут, ён таксама можа даць вам спосаб адлюстравання функцыі дыспетчарызацыі у якасці апоры.

Гэта ізалюе цалкам логіку ад прадстаўлення пласта. Гэта сапраўды цікавы спосаб рабіць рэчы, і ў значнай ступені залежыць ад функцыянальнага праграмавання, як вы можаце лёгка падзяліць усе залежнасць кампаненты непасрэдна ў яго рэквізіце.

Калі вы хочаце даведацца больш аб гэтым ёсць акуратная артыкул тут які ўводзіць гэтыя паняцці.

З дапамогай гэтага прынцыпу на ўвазе, вызначыць другі файл як:

імпарт Рэагаваць з «рэагаваць» імпарту {падлучэння} ад «рэагаваць-Redux» імпартнай ProductComp з «../components/product» імпарт раздзелы з "наступных / галавы" пашырае клас прадукт React.Component {статычнае getInitialProps = ({запыт}) => ({ID: query.id}) getProduct = () => (this.props.products.filter (х => x.id == this.props.id) [0]) аказваюць = () => (<DIV> <Head> <сцэнар SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"> </ скрыпт> <SCRIPT SRC = "https: //cdn.snipcart.com/scripts/2.0/snipcart.js "дадзеных АПА ключ =" YjdiNWIyOTUtZTIyMy00MWMwLTkwNDUtMzI1M2M2NTgxYjE0 "ID =" snipcart "> </ скрыпт> <спасылка HREF =" https://cdn.snipcart.com/ тэмы / 2,0 / база / snipcart.min.css "отн =" Табліца стыляў "Тып =" тэкст / CSS "/> <спасылка HREF =" / статычны / main.css "отн =" Табліца стыляў "/> <META NAME =" назву "змест = {" востраканечны Блайндера "+ this.getProduct (). імя} /> <META NAME =" апісанне "змест = {this.getProduct (). апісанне} /> </ HEAD> <A HREF =" / «> вярнуцца на галоўную </a> <ProductComp {... (this.getProduct ())} /> </ DIV>); } Const mapStateToProps = (стан) => ({прадукты: state.products}) экспарту па змаўчанні падлучэння (mapStateToProps) (Product)

Такім чынам, кампаненты заставацца «чыстымі», што азначае, што яны не апрацоўваюць фільтруе логіку, ні логіку выбаркі. Яны проста атрымаць дадзеныя і паказаць яго.

Я таксама дадаў неабходныя сцэнары Snipcart ст. галава кампанента Next.js 'з'яўляецца просты абалонкай. Так што ўсё пакласці туды будзе пастаўляцца ў камплекце ўнутры галоўкі тэга аказанай старонкі.

Я таксама уключыў некаторыя мета-тэгі тут. У гэтым выпадку, я выкарыстаў "назва" і "апісанне", які вы павінны запоўніць з доследным ключавымі словамі. Нават калі яны не будуць з'яўляцца на старонцы, яны дапамагаюць сканарам зразумець змест вашай старонкі.

Для SEO, гэта таксама важна ведаць аб мета імя = «робаты». Вы будзеце выкарыстоўваць яго ў вялікіх праектах, дзе ў вас ёсць ўнутраныя старонкі, даступныя пасля ўваходу ў сістэму або любой іншай старонцы вы не хочаце, каб атрымаць індэксавацца. прачытайце гэта каб вывучыць усе яго атрыбуты.

4. Стварэнне статычных файлаў для React SEO

Паколькі старонкі ствараюцца дынамічна з выкарыстаннем дадзеных сховішчы Redux, вам неабходна прадаставіць некаторыя шляху да наступнага, каб ведаць, якія маршруты генераваць пры стварэнні статычных файлаў.

Для гэтага, стварыце next.config.js файл непасрэдна ў тэчцы маршруту:

module.exports = {exportPathMap: функцыя () {вяртанне { '/': {старонка: '/'}, '/ прадукт / 1': {старонка: '/ прадукт', запыт: {ID: "1"}} , '/ прадукт / 2': {старонка: '/ прадукт', запыт: {ID: "2"}}, '/ прадукт / 3': {старонка: '/ прадукт', запыт: {ID: "3" }}}}}

Мне вельмі падабаецца, як проста яна апрацоўваецца. Няма неабходнасці падлучэння да працэсу зборкі; просты файл JS дазваляе гэта зрабіць.

Вядома, гэта было ўсяго тры прадуктаў з лёгкімі ідэнтыфікатарамі на жорсткі код тут. Але гэта не было б цяжка стварыць які вяртаецца аб'ект дынамічна з некаторым названым фарматам, так як гэта файл JavaScript, дзе вы можаце выкарыстоўваць любую логіку.

Перад разгортваннем гэтага якой-небудзь трэцяй баку, давайце паспрабуем яго на месцы першай.

Дадайце сцэнарыі наступны падзел у файл package.json:

«Скрыпты»: { «будаваць»: «наступны білд», «экспарт»: «наступны экспарт», «разгарнуць»: «наступны білд && наступны экспарт», «старт»: «Наступны»}

Зараз запусціце старт НПМ ў каранёвай тэчцы вашага праекта. Пачнецца Далей у якасці сервера, і вы павінны быць у стане атрымаць доступ да ўсяго па адрасе: // лакальны: 3000.

Калі вы хочаце стварыць статычныя файлы замест гэтага, вы можаце зрабіць гэта з дапамогай экспарту най перспектывы. Гэта будзе генераваць з тэчкі, дзе вы знойдзеце іх. Калі вы хочаце размясціць іх на месцы, каб праверыць выхад, вы можаце зрабіць гэта хутка з пакетам НПМ, такія як служыць.

5. Разгортванне статычных актываў

Цяпер вы гатовыя да разгортвання вэб-сайта. Давайце выкарыстоўваць Netlify.

Па-першае, вам трэба націснуць код у рэпазітар Git, а затым скакаць у Netlify-х прыборная панэль ,

Там, вырашылі стварыць новы сайт з наступнага канфігурацыяй:

Варта адзначыць, што стваральнікі Next таксама разгарнуць прадукт пад назвай у цяперашні час , Гэта дазваляе разгортваць статычныя актывы пасля нарошчвання непасрэдна з вашага тэрмінала, з дапамогай адной каманды. Гэта вельмі акуратным, але так як я ўжо з дапамогай Git РЭПО, каб паказаць мой код, я вырашыў прытрымлівацца Netlify.

Жывая дэманстрацыя і GitHub РЭПО

паглядзець дэма тут ,

Глядзіце РЭПО GitHub тут ,

Іншыя важныя меркаванні агульнай SEO

Мабільная першая індэксацыя у цяперашні час адзін з асноўных фактараў ранжыравання. Настолькі, што вы павінны клапаціцца аб сваім мабільным вопыце, наколькі працоўны стол адзін, калі не больш!
Калі вы да гэтага часу не ведаюць пра важнае значэнне HTTPS сувязі, вы павінны глядзець на яго адразу. Я хостынг гэта дэма на Netlify , Якая прадастаўляе бясплатныя SSL сертыфікаты з усімі планамі.
Каб да вашай SEO гульні, вы будзеце жадаць, каб апрацаваць вялікае ўтрыманне , Вы таксама хочаце, каб мець магчымасць лёгка рэдагаваць і аптымізаваць яго. Для мэт рэдагавання кантэнту, разгледзіць кіданне адзін з іх безгаловы CMS у сумесь!
Не забудзьцеся дадаць адпаведныя мета-тэгі, як мы ўжо бачылі раней. Карта сайта вашых старонак прыкладання таксама вельмі актуальная тут. Вы можаце знайсці вялікі прыклад таго, як стварыць карту сайта для праектаў Next.js тут ,

закрыццё думкі

Гульня з абодвух Next.js і Рэагаваць было вельмі весела. Я не сутыкаўся з якімі-небудзь сур'ёзнымі праблем, так як усе адказалі даволі прамалінейныя ў іх дакументацыі, якая на самой справе старанна. Мне падабаецца «» Тэст »падыход у яго ёсць, арыгінал!

Гэта заняло ў мяне каля двух гадзін, каб пабудаваць усе гэта. Спатрэбілася трохі больш часу, выкарыстоўваючы Redux зрэагаваць якое абавязвае: Я блукаў некаторы час у іх прыкладах дакладна разумець, што адбываецца.

Для таго, каб падштурхнуць усё гэта далей, было б цікава сабраць магазін з вялікай колькасцю прадуктаў для стварэння pathMap дынамічна. Я таксама задаюся пытаннем, на які паказвае працэс зборкі становіцца разадзьмутым, калі ў вас занадта шмат маршрутаў для экспарту. Калі ў вас ёсць адказ на гэтае пытанне, дайце мне ведаць у каментарах!

З творчасцю, вялікім кадаваннем і удумлівым сыходам за SEO нішто не павінна стаяць на шляху вашых наступных праектаў!

Калі вам спадабалася гэтая пасада, калі ласка , заняць другое месца падзяліцца на Twitter , Ёсць каментары, пытанні? Хіт раздзел ніжэй!

Js?
Js?
Id}`} HREF = { `/ прадукт?

Прыкладная Рэагаваць SEO на Next.js App [Live Demo]