NextJS фреймворкининг асосий ишлаш тамойили

Олдинги дарсликларда биз NextJS фреймворкини ўрнатиб олдик ва унинг асосий тузилиши билан танишдик. Энди асосий иш билан шуғулланиш вақти келди.

NextJS-нинг асосий қисми роутингдир. Роутинг шундай ишлайди: фойдаланувчи браузернинг манзил сатрига бирон URL ни кирганда, NextJS фреймворки браузерга шу URL га мос келувчи маълум бир файлни қайтаради.

NextJS даги роутинг ўзига хос тарзда ташкил қилинган. Унинг моҳияти шундан иборатки, ҳар бир сўралган URL га src/app ичидаги maълум бир папка мос келади.

Бунда папканинг ичида page.jsx номли файл бўлиши керак. Айнан мана шу файл браузерга қайтарилади. Ҳатто биз бу файлда JSX да код ёзамиз, аммо браузерга саҳифанинг тайёр HTML коди жўнатилади.

Келтирилган мисолни кўриб чиқайлик. Фароз қилайлик, биз /test/ URL га маълум бир матн қайтарилишини истаймиз.

Мос келувчи папкани яратамиз: src/app/test. Ушбу папканинг ичида page.jsx файлини яратамиз ва ушбу ичкилик билан тулдирамиз:

export default function Test() {
	return <h1>hello, user!</h1>;
}

Браузерингизда бизнинг URL ни очинг: /test. Ва сиз биз JSX файлининг ичига ёзган матнни кўрасиз.

Матнни ўзгартириб кўринг ва файлни сақланг. Шундан сўнг матн браузерда автомат равишда ўзгаради. NextJS ишлаб чиқариш режимида шундай ишлайди.

Шундай килингки, /about манзилига мурожаат килинганда браузерда сизнинг исмингиз ва фамилиянгиз билан хабар чиқарилсин.