Skip to content

Commit

Permalink
feat: migreate the index page from Page Rotuer to App Router
Browse files Browse the repository at this point in the history
  • Loading branch information
ixartz committed Dec 3, 2023
1 parent 12b89bc commit fd3e82c
Show file tree
Hide file tree
Showing 2 changed files with 198 additions and 4 deletions.
2 changes: 1 addition & 1 deletion README.md
Expand Up @@ -212,7 +212,7 @@ turso db tokens create nextjs-boilerplate
│ ├── app # Next JS App (App Router)
│ ├── components # React components
│ ├── layouts # Layouts components
│ ├── libs # 3rd party libraries
│ ├── libs # 3rd party libraries configuration
│ ├── models # Database models
│ ├── pages # Next JS Pages (page router)
│ ├── pages.test # Next JS Pages tests (this avoids tests to be treated as a Next.js pages)
Expand Down
200 changes: 197 additions & 3 deletions src/app/[locale]/page.tsx
@@ -1,6 +1,200 @@
import { useTranslations } from 'next-intl';
import Image from 'next/image';

import { Sponsors } from '@/components/Sponsors';
import { Main } from '@/templates/Main';

export default function Index() {
const t = useTranslations('Index');
return <h1>{t('title')}</h1>;
return (
<Main>
<a href="https://github.com/ixartz/Next-js-Boilerplate">
<Image
src="/assets/images/nextjs-starter-banner.png"
alt="Nextjs starter banner"
width={600}
height={315}
unoptimized
/>
</a>
<h2 className="mt-5 text-2xl font-bold">Sponsors</h2>
<Sponsors />
<h2 className="mt-5 text-2xl font-bold">
Boilerplate code for your Nextjs project with Tailwind CSS
</h2>
<p>
<span role="img" aria-label="rocket">
🚀
</span>{' '}
Next.js Boilerplate is a starter code for your Next js project by
putting developer experience first .{' '}
<span role="img" aria-label="zap">
⚡️
</span>{' '}
Made with Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged,
VSCode, Netlify, PostCSS, Tailwind CSS, Authentication with Clerk,
Database with DrizzleORM (SQLite, PostgreSQL, and MySQL) and Turso.
</p>
<h3 className="text-lg font-semibold">Next js Boilerplate Features</h3>
<p>Developer experience first:</p>
<ul>
<li>
<span role="img" aria-label="fire">
🔥
</span>{' '}
<a href="https://nextjs.org" rel="nofollow">
Next.js
</a>{' '}
for Static Site Generator
</li>
<li>
<span role="img" aria-label="art">
🎨
</span>{' '}
Integrate with{' '}
<a href="https://tailwindcss.com" rel="nofollow">
Tailwind CSS
</a>
</li>
<li>
<span role="img" aria-label="nail_care">
💅
</span>{' '}
PostCSS for processing Tailwind CSS
</li>
<li>
<span role="img" aria-label="tada">
🎉
</span>{' '}
Type checking Typescript
</li>
<li>
<span role="img" aria-label="pencil2">
✏️
</span>{' '}
Linter with{' '}
<a href="https://eslint.org" rel="nofollow">
ESLint
</a>
</li>
<li>
<span role="img" aria-label="hammer_and_wrench">
🛠
</span>{' '}
Code Formatter with{' '}
<a href="https://prettier.io" rel="nofollow">
Prettier
</a>
</li>
<li>
<span role="img" aria-label="fox_face">
🦊
</span>{' '}
Husky for Git Hooks
</li>
<li>
<span role="img" aria-label="no_entry_sign">
🚫
</span>{' '}
Lint-staged for running linters on Git staged files
</li>
<li>
<span role="img" aria-label="lock">
🔒
</span>{' '}
Authentication with{' '}
<a href="https://clerk.com?utm_source=github&utm_medium=sponsorship&utm_campaign=nextjs-boilerplate">
Clerk
</a>
</li>
<li>
<span role="img" aria-label="package">
📦
</span>{' '}
Type-safe ORM with DrizzleORM, compatible with SQLite, PostgreSQL, and
MySQL
</li>
<li>
<span role="img" aria-label="computer_disk">
💽
</span>{' '}
Global Database with{' '}
<a href="https://turso.tech/?utm_source=nextjsstarterbp">Turso</a>
</li>
<li>
<span role="img" aria-label="no_entry_sign">
🗂
</span>{' '}
VSCode configuration: Debug, Settings, Tasks and extension for
PostCSS, ESLint, Prettier, TypeScript
</li>
<li>
<span role="img" aria-label="robot">
🤖
</span>{' '}
SEO metadata, JSON-LD and Open Graph tags with Next SEO
</li>
<li>
<span role="img" aria-label="robot">
⚙️
</span>{' '}
<a
href="https://www.npmjs.com/package/@next/bundle-analyzer"
rel="nofollow"
>
Bundler Analyzer
</a>
</li>
<li>
<span role="img" aria-label="rainbow">
🌈
</span>{' '}
Include a FREE minimalist theme
</li>
<li>
<span role="img" aria-label="hundred">
💯
</span>{' '}
Maximize lighthouse score
</li>
</ul>
<p>Built-in feature from Next.js:</p>
<ul>
<li>
<span role="img" aria-label="coffee">
</span>{' '}
Minify HTML &amp; CSS
</li>
<li>
<span role="img" aria-label="dash">
💨
</span>{' '}
Live reload
</li>
<li>
<span role="img" aria-label="white_check_mark">
</span>{' '}
Cache busting
</li>
</ul>
<h3 className="text-lg font-semibold">Our Starter code Philosophy</h3>
<ul>
<li>Minimal code</li>
<li>SEO-friendly</li>
<li>
<span role="img" aria-label="rocket">
🚀
</span>{' '}
Production-ready
</li>
</ul>
<p>
Check our GitHub project for more information about{' '}
<a href="https://github.com/ixartz/Next-js-Boilerplate">
Nextjs Boilerplate
</a>
.
</p>
</Main>
);
}

0 comments on commit fd3e82c

Please sign in to comment.