நீங்கள் Next.js உடன் உருவாக்கப்பட்ட ஒரு நவீன வலைப்பதிவு தொடக்க டெம்ப்ளேட்டைத் தேடுகிறீர்கள் என்றால், NextJS Base Blog திட்டம் ஒரு சிறந்த தொடக்கப் புள்ளியாகும். இது Next.js 15, React 19, TypeScript மற்றும் Tailwind CSS 4 உடன் உருவாக்கப்பட்ட ஒரு முழு அம்சமான திறந்த மூல வலைப்பதிவு பயன்பாடாகும் .
இந்த திட்டம் ஒரு சுத்தமான கட்டமைப்பு, நவீன UI componentsமற்றும் ஒரு போலி API அடுக்கை வழங்குகிறது, இது பின்தளத்தை அமைக்காமல் விரைவாக ஒரு வலைப்பதிவை உருவாக்க விரும்பும் டெவலப்பர்களுக்கு ஏற்றதாக அமைகிறது.
GitHub களஞ்சியம்: https://github.com/bfotool/nextjs-base-blog
இந்த திட்டம் குறிப்பாக பயனுள்ளதாக இருக்கும்:
Next.js செயலியைக் கற்கும் டெவலப்பர்கள்Router
ஒரு வலைப்பதிவு அல்லது உள்ளடக்க வலைத்தளத்தை விரைவாக உருவாக்குதல்
Next.js பாய்லர் பிளேட் திட்டத்தை உருவாக்குதல்
உண்மையான பின்தள API ஐ இணைப்பதற்கு முன் UI அம்சங்களை உருவாக்குதல்.
திட்ட கண்ணோட்டம்
NextJS Base வலைப்பதிவு, நவீன உள்ளடக்க வலைத்தளங்களில் காணப்படும் பல பொதுவான அம்சங்களுடன், தயாரிப்புக்குத் தயாரான வலைப்பதிவு டெம்ப்ளேட்டாக வடிவமைக்கப்பட்டுள்ளது .
திட்டத்தில் பின்வருவன அடங்கும்:
சிறப்பு இடுகைகளைக் கொண்ட முகப்புப்பக்கம்
வலைப்பதிவு இடுகை பக்கங்கள்
வகை வடிகட்டுதல்
முழு உரை தேடல்
பக்கமாக்கல்
பொருளடக்கம்
தொடர்புடைய பதிவுகள்
இருண்ட/ஒளி தீம்
இந்த திட்டத்தின் மிகவும் சுவாரஸ்யமான பகுதிகளில் ஒன்று போலி API அடுக்கு ஆகும், இது Axios இடைமறிப்பான்களைப் பயன்படுத்தி REST API ஐ உருவகப்படுத்துகிறது. இது டெவலப்பர்கள் ஒரு பின்தள சேவையகம் தேவையில்லாமல் பயன்பாட்டை உருவாக்கி சோதிக்க அனுமதிக்கிறது .
முக்கிய அம்சங்கள்
முகப்புப்பக்கம்
முகப்புப் பக்கம் பல முக்கியமான பிரிவுகளைக் காட்டுகிறது:
சிறப்பு நாயகன் பதிவு
வகை வடிப்பான்கள்
வலைப்பதிவு இடுகைகளின் கட்டம்
பக்கவாட்டு வழிசெலுத்தல்
இந்த அமைப்பு முழுமையாக பதிலளிக்கக்கூடியது மற்றும் டெஸ்க்டாப் மற்றும் மொபைல் சாதனங்களுக்கு உகந்ததாக உள்ளது.
வலைப்பதிவு இடுகை பக்கம்
ஒவ்வொரு கட்டுரையும் ஒரு மாறும் பாதை வழியாக அணுகக்கூடியது:
/blog/[slug]
வலைப்பதிவு இடுகைப் பக்கத்தில் பல பயனுள்ள அம்சங்கள் உள்ளன:
முழு கட்டுரை உள்ளடக்கம்
தானியங்கி உள்ளடக்க அட்டவணை
மதிப்பிடப்பட்ட வாசிப்பு நேரம்
சமூகப் பகிர்வு பொத்தான்கள்
தொடர்புடைய இடுகைகள் பரிந்துரைகள்
இந்த அம்சங்கள் நவீன வலைப்பதிவு தளங்களைப் போன்ற ஒரு தொழில்முறை வாசிப்பு அனுபவத்தை உருவாக்க உதவுகின்றன.
வகைப் பக்கங்கள்
பயனர்கள் வகை வாரியாக இடுகைகளை உலாவலாம்.
எடுத்துக்காட்டு பாதை:
/blog/category/[slug]
இந்த அம்சம் வாசகர்கள் குறிப்பிட்ட தலைப்புகளுக்குள் உள்ளடக்கத்தை ஆராய அனுமதிக்கிறது.
தேடல் செயல்பாடு
இந்த திட்டத்தில் உள்ளமைக்கப்பட்ட தேடல் பக்கம் உள்ளது:
/search
தேடல் ஆதரவுகள்:
நிகழ்நேர முடிவுகள்
நீக்கப்பட்ட உள்ளீடு
தலைப்புகள், பகுதிகள் மற்றும் குறிச்சொற்கள் முழுவதும் தேடுதல்
இது பயன்பாட்டினை மேம்படுத்துவதோடு, பயனர்கள் பொருத்தமான உள்ளடக்கத்தை விரைவாகக் கண்டறியவும் உதவுகிறது.
அறிமுகம் மற்றும் தொடர்பு பக்கங்கள்
இந்தத் திட்டத்தில் தொழில்முறை வலைப்பதிவுகளில் பொதுவாகக் காணப்படும் கூடுதல் பக்கங்களும் அடங்கும்.
பக்கத்தைப் பற்றி
அறிமுகம் பக்கம் அறிமுகப்படுத்துகிறது:
அணி
திட்டத்தின் கதை
முக்கிய மதிப்புகள்
தொடர்பு பக்கம்
தொடர்புப் பக்கத்தில் முழுமையாக சரிபார்க்கப்பட்ட படிவம் உள்ளது, அதில் பின்வருவன அடங்கும்:
படிவ சரிபார்ப்பு
டோஸ்ட் அறிவிப்புகள்
வெற்றி மற்றும் பிழை கருத்து
டார்க் பயன்முறை ஆதரவு
இந்த வலைப்பதிவு இருண்ட பயன்முறை மற்றும் ஒளி பயன்முறையை ஆதரிக்கிறது .
அம்சங்கள் பின்வருமாறு:
தானியங்கி சிஸ்டம் தீம் கண்டறிதல்
கைமுறை நிலைமாற்றம்
localStorage ஐப் பயன்படுத்தி தீம் நிலைத்தன்மை
போலி API அடுக்கு(பின்தளம் இல்லாத மேம்பாடு)
இந்த திட்டத்தின் மிகவும் சுவாரஸ்யமான பகுதிகளில் ஒன்று அதன் போலி API அமைப்பு .
உண்மையான சேவையகத்தை அழைப்பதற்குப் பதிலாக, பயன்பாடு REST API பதில்களை உருவகப்படுத்த Axios இடைமறிப்பான்களைப் பயன்படுத்துகிறது.
போலி API எவ்வாறு செயல்படுகிறது
ஆக்சியோஸ் நிகழ்வு இதில் உருவாக்கப்படுகிறது:
src/services/api-client.ts
சூழல் மாறி இயக்கப்பட்டிருக்கும் போது:
NEXT_PUBLIC_USE_MOCK_API=true
நெட்வொர்க்கை அடைவதற்கு முன்பு கோரிக்கைகள் இடைமறிக்கப்படுகின்றன.
போலி கையாளுபவர்கள் யதார்த்தமான தாமதங்களுடன்(200–600 எம்எஸ்) போலி பதில்களைத் தருகிறார்கள்.
பதில்கள் உண்மையான API பதில்களைப் போலவே செயல்படும்.
போலித் தரவு இதில் சேமிக்கப்படுகிறது:
src/mocks/
உட்பட:
மாதிரி பதிவுகள்
ஆசிரியர்கள்
வகைகள்
கிடைக்கும் API எண்ட்பாயிண்ட்கள்
போலி API பல இறுதிப்புள்ளிகளை ஆதரிக்கிறது:
| முறை | இறுதிப்புள்ளி | விளக்கம் |
|---|---|---|
| பெறு | /பதிவுகள் | பக்கமாக்கப்பட்ட வலைப்பதிவு இடுகைகள் |
| பெறு | /பதிவுகள்/சிறப்பு | சிறப்பு இடுகைகள் |
| பெறு | /பதிவுகள்/:ஸ்லக் | ஒற்றை வலைப்பதிவு இடுகை |
| பெறு | /பிரிவுகள் | வகைப் பட்டியல் |
| பெறு | /ஆசிரியர்கள் | ஆசிரியர் பட்டியல் |
| அஞ்சல் | /தொடர்பு | தொடர்பு படிவத்தை சமர்ப்பிக்கவும் |
தொழில்நுட்ப அடுக்கு
இந்த திட்டம் ஒரு நவீன முன்பக்க அடுக்கைப் பயன்படுத்துகிறது.
| அடுக்கு | தொழில்நுட்பம் |
|---|---|
| கட்டமைப்பு | அடுத்து.js 15 |
| UI நூலகம் | எதிர்வினை 19 |
| மொழி | டைப்ஸ்கிரிப்ட் |
| ஸ்டைலிங் | டெயில்விண்ட் CSS 4 |
| HTTP கிளையன்ட் | ஆக்சியோஸ் |
| சின்னங்கள் | லூசைட் ரியாக்ட் |
| லைனிங் | ESLint தமிழ் in இல் |
| வடிவமைத்தல் | அழகானது |
இந்த அடுக்கு வழங்குகிறது:
வலுவான வகை பாதுகாப்பு
பராமரிக்கக்கூடிய கட்டமைப்பு
நவீன டெவலப்பர் அனுபவம்
திட்ட அமைப்பு
திட்ட அமைப்பு ஒரு சுத்தமான மற்றும் அளவிடக்கூடிய கட்டமைப்பைப் பின்பற்றுகிறது.
src/
├── app/
├── components/
├── services/
├── mocks/
├── contexts/
├── hooks/
├── types/
└── lib/
செயலிRouter
இந்த appகோப்பகத்தில் அனைத்து பயன்பாட்டு வழிகளும் உள்ளன.
எடுத்துக்காட்டுகள்:
app/page.tsx
app/blog/[slug]/page.tsx
app/search/page.tsx
இது Next.js இன் புதிய பதிப்புகளில் அறிமுகப்படுத்தப்பட்ட Next.js பயன்பாட்டு Routerகட்டமைப்பைப் பின்பற்றுகிறது.
கூறுகள்
UI கள் componentsதருக்க குழுக்களாக ஒழுங்கமைக்கப்பட்டுள்ளன:
components/layout
components/common
components/blog
இந்த அமைப்பு UI குறியீட்டை ஒழுங்கமைத்து பராமரிக்க எளிதாக்குகிறது.
சேவைகள் அடுக்கு
கோப்புறையில் servicesAPI தொடர்பான தர்க்கம் உள்ளது:
API கிளையன்ட் உள்ளமைவு
அஞ்சல் சேவை
வகை சேவை
தொடர்பு படிவ சேவை
இந்த அடுக்கு தரவு பெறுதல் தர்க்கத்தை UI இலிருந்துcomponents பிரிக்கிறது, இது அளவிடுதலை மேம்படுத்துகிறது.
நிறுவல் வழிகாட்டி
தேவைகள்
தொடங்குவதற்கு முன், உங்களிடம் உள்ளதா என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்:
Node.js 18 அல்லது அதற்குப் பிறகு
npm, நூல், அல்லது pnpm
களஞ்சியத்தை குளோன் செய்யவும்
git clone https://github.com/bfotool/nextjs-base-blog.git
cd nextjs-base-blog
சார்புகளை நிறுவவும்
npm install
சுற்றுச்சூழல் மாறிகளை உள்ளமைக்கவும்
cp .env.example .env
மேம்பாட்டு சேவையகத்தைத் தொடங்கவும்.
npm run dev
உங்கள் உலாவியைத் திறந்து இங்கு செல்க:
http://localhost:3000
கிடைக்கும் ஸ்கிரிப்டுகள்
| கட்டளை | விளக்கம் |
|---|---|
| npm இயக்க டெவலப்பர் | மேம்பாட்டு சேவையகத்தைத் தொடங்கவும் |
| npm ரன் பில்ட் | உற்பத்தி கட்டமைப்பை உருவாக்குங்கள் |
| npm ரன் ஸ்டார்ட் | உற்பத்தி சேவையகத்தைத் தொடங்கு |
| npm ரன் லின்ட் | ESLint ஐ இயக்கு |
| npm இயக்க வடிவம் | Prettier உடன் குறியீட்டை வடிவமைக்கவும் |
| npm இயக்க வகை சரிபார்ப்பு | டைப்ஸ்கிரிப்ட் சரிபார்ப்புகளை இயக்கவும் |
உண்மையான API க்கு மாறுதல்
நீங்கள் திட்டத்தை உண்மையான பின்தள API உடன் இணைக்க விரும்பினால், இந்தப் படிகளைப் பின்பற்றவும்.
படி 1: போலி API ஐ முடக்கு
கோப்பைத் திருத்து .env:
NEXT_PUBLIC_USE_MOCK_API=false
படி 2: API அடிப்படை URL ஐ அமைக்கவும்
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
படி 3: பொருத்த தரவு வகைகள்
உங்கள் பின்தள API, இதில் உள்ள TypeScript வரையறைகளுடன் பொருந்தக்கூடிய தரவை வழங்குவதை உறுதிசெய்யவும்:
src/types/index.ts
கூடுதல் குறியீடு மாற்றங்கள் தேவையில்லை.
உள்ளடக்கத்தைத் தனிப்பயனாக்குதல்
போலி உள்ளடக்கத்தை உள்ளே திருத்தலாம்:
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
இது டெவலப்பர்கள் டெமோ உள்ளடக்கத்தை விரைவாகத் தனிப்பயனாக்க அனுமதிக்கிறது.
தீம் மற்றும் UI ஐத் தனிப்பயனாக்குதல்
உலகளாவிய ஸ்டைலிங் இங்கே காணலாம்:
src/app/globals.css
இந்த திட்டம் பின்வரும் எழுத்துருக்களைப் பயன்படுத்துகிறது:
டிஎம் சான்ஸ்
ஜெட்பிரைன்ஸ் மோனோ
உங்கள் வடிவமைப்புத் தேவைகளைப் பொறுத்து நீங்கள் பாணிகளை மாற்றலாம் அல்லது எழுத்துருக்களை மாற்றலாம்.
முடிவுரை
NextJS Base Blog என்பது Next.js உடன் வலைப்பதிவை உருவாக்குவதற்கான சக்திவாய்ந்த மற்றும் நவீன தொடக்க டெம்ப்ளேட் ஆகும்.
திட்டத்தின் முக்கிய நன்மைகள் பின்வருமாறு:
நவீன தொழில்நுட்ப அடுக்கு
சுத்தமான கட்டிடக்கலை
மேம்பாட்டிற்கான போலி API
உண்மையான பின்தள APIகளுடன் எளிதான ஒருங்கிணைப்பு
பதிலளிக்கக்கூடிய UI மற்றும் நவீன அம்சங்கள்
நீங்கள் Next.js உடன் ஒரு வலைப்பதிவு, டெவலப்பர் வலைத்தளம் அல்லது உள்ளடக்க தளத்தை உருவாக்குகிறீர்கள் என்றால், இந்த களஞ்சியம் உங்களுக்கு குறிப்பிடத்தக்க மேம்பாட்டு நேரத்தை மிச்சப்படுத்தும்.
மூலக் குறியீட்டை இங்கே ஆராயுங்கள்: https://github.com/bfotool/nextjs-base-blog