Next.js தொடக்கம் வழிகாட்டி: நவீன வலை பயன்பாடுகளை உருவாக்குவதற்கான சிறந்த தேர்வு

அறிமுகம்

இன்றைய வேகமாக வளர்ந்து வரும் முன்னணி மேம்பாட்டு துறையில், Next.js என்பது மிகவும் கவனிக்கப்படும் கட்டமைப்பாகும், இது மேம்பாட்டாளர்களுக்கு உயர் செயல்திறன், நவீன வலை பயன்பாடுகளை உருவாக்குவதற்கான சக்திவாய்ந்த கருவிகள் மற்றும் நெகிழ்வுகளை வழங்குகிறது. நீங்கள் ஆரம்பக்காரர் ஆனாலும், அல்லது தற்போதைய திட்டத்தில் Next.js ஐ அறிமுகப்படுத்த விரும்பும் மேம்பாட்டாளரானாலும், இந்தக் கட்டுரை உங்களுக்கு Next.js இன் அடிப்படை கருத்துக்கள் மற்றும் பயன்பாட்டை புரிந்துகொள்ள ஒரு முழுமையான தொடக்கம் வழிகாட்டியை வழங்கும்.

Next.js என்ன?

Next.js என்பது React இன் ஒரு கட்டமைப்பு, இது மேம்பாட்டாளர்களுக்கு உற்பத்தி தயாராக உள்ள பயன்பாடுகளை விரைவாக உருவாக்க உதவுகிறது. இது பல சக்திவாய்ந்த அம்சங்களை வழங்குகிறது, உதாரணமாக:

• சேவையக பக்கம் உருவாக்குதல் (SSR) மற்றும் நிலையான உருவாக்குதல் (SSG): சேவையகத்தில் பக்கங்களை முன்கூட்டியே உருவாக்க ஆதரவு, ஏற்றுமதி வேகம் மற்றும் SEO செயல்திறனை மேம்படுத்துகிறது.
• வழிமுறைகள்: உள்ளமைக்கப்பட்ட கோப்பு அமைப்பு வழிமுறைகள், பக்கம் மற்றும் API வழிமுறைகளை நிர்வகிப்பதைக் எளிதாக்குகிறது.
• API வழிமுறைகள்: ஒரே திட்டத்தில் எளிதாக API களை உருவாக்கலாம், கூடுதல் சேவையகம் தேவையில்லை.
• செயல்திறனை மேம்படுத்துதல்: தானாகவே குறியீட்டு பிளவுபடுத்தல், ஆரம்ப ஏற்றுமதி நேரத்தை குறைக்கிறது.

Next.js ஐ நிறுவுதல்

Next.js ஐ நிறுவுவது மிகவும் எளிது, உங்கள் மேம்பாட்டு சூழலில் Node.js நிறுவப்பட்டிருப்பதை உறுதி செய்ய வேண்டும். புதிய திட்டத்தை விரைவாக உருவாக்க கீழ்காணும் கட்டளையை பயன்படுத்தலாம்:

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

மேலே உள்ள கட்டளைகளை இயக்கிய பிறகு, நீங்கள் http://localhost:3000 இல் புதிய Next.js பயன்பாடு தொடங்கியதை காண்பீர்கள்.

திட்ட அமைப்பு

Next.js பயன்பாட்டை உருவாக்கிய பிறகு, நீங்கள் ஒரு இயல்பான அடைவு அமைப்பை காண்பீர்கள்:

my-next-app/
├── node_modules/
├── public/
├── src/
│   ├── pages/
│   ├── styles/
│   └── components/
├── package.json
└── next.config.js

• pages/: பக்கங்களை உள்ளடக்கிய அடைவு, ஒவ்வொரு .js கோப்பும் தானாகவே ஒரு வழிமுறைக்கு ஒத்துப்போகும்.
• public/: நிலையான கோப்புகளுக்கான அடைவு, இந்த அடைவில் வைக்கப்படும் எந்த கோப்பும் நேரடியாக அணுகலாம்.
• styles/: CSS கோப்புகளை உள்ளடக்கிய அடைவு, உலகளாவிய அல்லது குறிப்பிட்ட கூறுகளுக்கான பாணிகளை உருவாக்க பயன்படுத்தலாம்.

பக்கம் மற்றும் வழிமுறைகளை உருவாக்குதல்

Next.js இன் பக்கங்கள் கோப்பு அமைப்பின் அடிப்படையில் வழிமுறை நிர்வாகத்தை மேற்கொள்கின்றன. pages/ அடைவில் ஒரு கோப்பை உருவாக்குங்கள், உதாரணமாக about.js, உள்ளடக்கம்:

export default function About() {
  return 

# எங்களைப் பற்றி

;
}

இதனால் /about வழிமுறையை தானாகவே உருவாக்கி, இந்தப் பக்கத்தை அணுகலாம்.

நிலையான உருவாக்குதல் மற்றும் சேவையக பக்கம் உருவாக்குதல்

Next.js தரவுகளைப் பெறும் உத்திகளை அடிப்படையாகக் கொண்டு நிலையான உருவாக்குதல் (Static Generation) மற்றும் சேவையக பக்கம் உருவாக்குதலை (Server-side Rendering) ஆதரிக்கிறது. எப்படி செயல்படுத்துவது என்பதைப் பார்ப்போம்:

நிலையான உருவாக்குதல் (Static Generation)

திட்டத்தை உருவாக்கும் போது, உள்ளடக்கத்தை முன்கூட்டியே உருவாக்க விரும்பினால், getStaticProps ஐப் பயன்படுத்தலாம். உதாரணமாக:

export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();

  return {
    props: {
      data: json,
    },
  };
}

export default function Page({ data }) {
  return {data.title};
}

சேவையக பக்கம் உருவாக்குதல் (Server-side Rendering)

ஒவ்வொரு கோரிக்கையிலும் தரவுகளைப் பெற விரும்பினால், getServerSideProps ஐப் பயன்படுத்தலாம்:

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { props: { data } };
}

export default function Page({ data }) {
  return {data.title};
}

CSS மற்றும் பாணிகளைச் சேர்க்குதல்

Next.js CSS பாணிகளைச் சேர்க்க பல வழிகளை வழங்குகிறது, எளிய வழி styles/ அடைவில் CSS கோப்புகளை உருவாக்கி, தேவையான பக்கங்களில் இறக்குமதி செய்வது:

import styles from './styles/Home.module.css';

export default function Home() {
  return 

# Next.js க்கு வரவேற்கிறோம்!

;
}

மேலும், நீங்கள் styled-components அல்லது Emotion போன்ற CSS-in-JS நூலகங்களைப் பயன்படுத்தி பாணிகளை கையாளலாம்.

API வழிமுறைகள்

நீங்கள் pages/api/ அடைவில் API வழிமுறைகளை உருவாக்கலாம். உதாரணமாக, hello.js என்ற கோப்பை உருவாக்குங்கள்:

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello API' });
}

API வழிமுறைகள் கோரிக்கைகள் மற்றும் பதில்களை கையாளலாம், முன்னணி தரவுகளை செயலாக்குவதற்கான திறனை வழங்குகின்றன.

Next.js பயன்பாட்டை வெளியிடுதல்

எளிய வெளியீட்டு முறை Vercel ஐப் பயன்படுத்துவது, இது Next.js இன் மேம்பாட்டு குழுவால் உருவாக்கப்பட்ட இலவச ஹோஸ்டிங் தளம். உங்கள் குறியீட்டை GitHub இல் தள்ளவும், பிறகு Vercel ஐ GitHub கணக்குடன் இணைத்தால், தானாகவே கட்டமைத்து வெளியிடப்படும்.

சுருக்கம்

Next.js என்பது நவீன வலை பயன்பாடுகளை உருவாக்குவதற்கான சிறந்த கட்டமைப்பாகும், அதன் சக்திவாய்ந்த அம்சங்கள் மற்றும் நெகிழ்வுகள் மேம்பாட்டாளர்களுக்கு பயன்பாட்டின் கட்டமைப்பு மற்றும் மேம்பாட்டில் கவனம் செலுத்த அனுமதிக்கின்றன. இந்தக் கட்டுரையின் மூலம், நீங்கள் Next.js இன் அடிப்படை பயன்பாட்டைப் பற்றிய ஆரம்ப புரிதலைப் பெற்றிருப்பீர்கள் என்று நம்புகிறேன். எதிர்கால திட்டங்களில் Next.js இன் பலன்களை முழுமையாக பயன்படுத்தி, மேலும் திறமையான வலை பயன்பாடுகளை உருவாக்க நீங்கள் முடியும்.

எந்த சந்தேகங்கள் அல்லது மேலும் கற்றுக்கொள்ள வேண்டிய வளங்கள் இருந்தால், தயவுசெய்து Next.js இன் அதிகாரப்பூர்வ ஆவணங்களை பார்க்கவும்.