86 lines
2.7 KiB
Markdown
86 lines
2.7 KiB
Markdown
|
# Eco-Life - A Multilingual Static Next.js Project
|
||
|
|
|
||
|
|
<p align="center">
|
||
|
|
<img src="public/images/logo-text.png" width="300" />
|
||
|
|
</p>
|
||
|
|
|
||
|
|
This project is a statically exported, multilingual website built with [Next.js](https://nextjs.org/) (App Router), [Tailwind CSS](https://tailwindcss.com/), and [ShadCN/UI](https://ui.shadcn.com/). It serves as a showcase for "Eco-Life," a fictional environmental initiative.
|
||
|
|
|
||
|
|
## Features
|
||
|
|
|
||
|
|
- **Static Site Generation (SSG)**: The entire site is statically exported for optimal performance and security. Configured with `output: 'export'`.
|
||
|
|
- **Multilingual Support (i18n)**: Fully supports multiple languages through Next.js's App Router i18n capabilities.
|
||
|
|
- Supported Languages: English (en), Simplified Chinese (zh-CN), Traditional Chinese (zh-TW), Korean (ko), and Japanese (ja).
|
||
|
|
- **Automatic Language Detection**: The root of the site automatically detects the user's browser language and redirects to the appropriate language version (e.g., `/en`, `/zh-CN`).
|
||
|
|
- **Dynamic Content**: Includes a blog with dynamically generated static pages for each post and language.
|
||
|
|
- **SEO Optimized**: Automatically generates `sitemap.xml` and `robots.ts` for better search engine visibility.
|
||
|
|
- **Modern Tech Stack**: Built with the latest features of Next.js, React Server Components, and Client Components.
|
||
|
|
|
||
|
|
## Getting Started
|
||
|
|
|
||
|
|
### Prerequisites
|
||
|
|
|
||
|
|
- [Node.js](https://nodejs.org/) (v18 or later)
|
||
|
|
- A package manager like [npm](https://www.npmjs.com/), [yarn](https://yarnpkg.com/), or [bun](https://bun.sh/)
|
||
|
|
|
||
|
|
### Installation
|
||
|
|
|
||
|
|
1. Clone the repository:
|
||
|
|
```bash
|
||
|
|
git clone <repository-url>
|
||
|
|
```
|
||
|
|
2. Navigate to the project directory:
|
||
|
|
```bash
|
||
|
|
cd <project-directory>
|
||
|
|
```
|
||
|
|
3. Install the dependencies:
|
||
|
|
```bash
|
||
|
|
npm install
|
||
|
|
# or
|
||
|
|
yarn install
|
||
|
|
# or
|
||
|
|
bun install
|
||
|
|
```
|
||
|
|
|
||
|
|
### Running the Development Server
|
||
|
|
|
||
|
|
To view the project in development mode with hot-reloading:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run dev
|
||
|
|
# or
|
||
|
|
yarn dev
|
||
|
|
# or
|
||
|
|
bun dev
|
||
|
|
```
|
||
|
|
|
||
|
|
Open [http://localhost:3000](http://localhost:3000) in your browser to see the result.
|
||
|
|
|
||
|
|
## Building for Production
|
||
|
|
|
||
|
|
To build the static site for production:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run build
|
||
|
|
# or
|
||
|
|
yarn build
|
||
|
|
# or
|
||
|
|
bun build
|
||
|
|
```
|
||
|
|
|
||
|
|
This command will generate a `build` directory containing all the static files for the website.
|
||
|
|
|
||
|
|
### Previewing the Static Site
|
||
|
|
|
||
|
|
After building, you can preview the local static site by running a simple HTTP server in the `build` directory. For example, using `serve`:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# Install serve if you don't have it
|
||
|
|
npm install -g serve
|
||
|
|
|
||
|
|
# Serve the build directory
|
||
|
|
serve build
|
||
|
|
```
|
||
|
|
|
||
|
|
This will start a server, and you can view your statically exported site at the provided local URL (e.g., `http://localhost:3000`).
|