Demo · Deploying Guide · FAQ
It seems there are some bugs on mobile devices that prevent the files list from rendering properly.
So I will use this chance to upgrade the project to Next.js 14
, use shadcn/ui
, and also add some new features.
There also some changes on the configuration file, so make sure to read the Migration Guide if you're upgrading from version 1.x.
Here's what changed in version 2:
- Theme Select, light mode? dark mode? you choose.
- shadcn/ui, change the UI library to
shadcn/ui
. - Faster Response Time, added cache to improve the response time.
- Revalidate Data, data fetching now utilizing revalidate. (can be changed from config file)
You can manually revalidate the data by sending POST request to
/api/revalidate
withAuthorization
header set to{{ process.env.SITE_PASSWORD }}
.
- General Layout, New fresh look with
shadcn/ui
. - Download Link, Added token that will be expired after x hour(s). (can be changed from config file)
- Raw Link, Raw link only available for image, video, and audio files. Raw link are recommended for hosting web project assets or comments on forum.
- Footer, now you can customize the footer from config file, also added support for Markdown.
- Data Fetching, now using
Server Actions
instead ofAPI Routes
. - Encryption, moved to
Server Actions
. - Typescript Config, target changed from
ES5
toES2021
. - Environment Variable, now focus on Server Side Environment Variable.
NEXT_PUBLIC_ENCRYPTION_KEY
changed toENCRYPTION_KEY
.NEXT_PUBLIC_SITE_PASSWORD
changed toSITE_PASSWORD
.MASTER_KEY
added.
- Configuration File, things are changed:
version
bumped to2.0
.masterKey
moved toEnvironment Variable
.apiConfig.revalidate
added.siteConfig.siteNameTemplate
added.siteConfig.siteAuthor
added.siteConfig.robots
added.siteConfig.footer
added.siteConfig.defaultAccentColor
deprecated.siteConfig.breadcrumbMax
added.siteConfig.toaster
added.siteConfig.navbarItems[number].icons
changed tolucide icons
.siteConfig.supports
added.
- Rendering issue on mobile devices.
@iconify/react
switched tolucide-react
.@mdx-js/loader
removed.@mdx-js/react
removed.@next/mdx
removed.@popperjs/core
removed.next
updated to^14.1.4
.next-seo
removed.tailwind-merge
updated to^2.2.2
.
next-gdrive-index
is an indexer for Google Drive, it's a simple project that I made to index my files in Google Drive.
It's aim to simplify the process of sharing files using Google Drive, and also implements some features that I think is useful for sharing files.
This project are HEAVILY INSPIRED by onedrive-vercel-index by SpencerWooo.
when I compare the price between these two services, Google Drive still cheaper than Onedrive.
For 100GB plan, Google Drive is IDR 269.000 / ~$18 USD annually, and Onedrive is IDR 319.000 / ~$21 USD annually.
For free plan, Google Drive offering 15GB of storage, and Onedrive offering 5GB of storage.
I know there are a lot of people selling cheap edu account for Google Drive and Onedrive, but most of the time those account doesn't last long, especially Google Drive account. So I want to do it legit without buying cheap edu account or anything similar this time.
- Private Index, lock the whole index site with password.
- Folder and file protection, you can protect your folder and files with password.
- Readme file, you can add readme file for your folder, so you can add some description for your folder.
- File preview, you can preview some file types directly from the browser, without downloading it first.
- Image preview
- Video preview
- Audio preview
- Markdown preview
- PDF preview
- Document preview (docx, pptx, xlsx)
- Code preview
- Text preview
- Manga preview (cbz)
- File search, you can search for files and folders easily.
- Direct download, you can download files directly from index site without opening Google Drive.
- Raw file link, you can use the raw file link for hosting your web project assets or comments on forum.
This only apply if
maxFileSize
is enabled.
You need to set the file sharing permission to Anyone with the link can view
for the files that you want to share.
Why? because the download link will be redirected to the Google Drive download link, and it can only be accessed if the file is shared with Anyone with the link can view
permission.
If not, the download link will be redirected to the Google Drive web content link, and it can be accessed without sharing the file.
But this might expose the file ID, so people might be able to access the files directly from Google Drive. (But I'm sure they can't access the folder itself, only the file that are being downloaded)
This only apply if you're using platform that have file size limit, like Vercel.
If you're using VPS or other platform that doesn't have file size limit, you can disablemaxFileSize
inside config file.
File size limit causing some files can't be previewed, and the download will be redirected to the raw file link.
This won't be fixed, because it's a limitation from the deployment platform itself.
From version 2.0, We are using Cache to improve the response time.
It might take a long time for deep nested folders, but once the data is fetched, it will be cached and the response time will be faster.
I also add revalidate config on page file to 5 minutes. You can change the value inside src/app/page.tsx
& src/app/[...rest]/page.tsx
.
The flow of the project are:
Validate the path is valid or not. (Only applied for/...[path]
)Fetch the password, readme, and files from Google Drive.Show to the user.
So, if you have a lot of files in your Google Drive, it might take a long time to fetch all the files.
To improve the response time, I added a cache to the response, so the next time you access the same path, it will be faster.
ATM, it roughly take around 600 - 2 seconds to fetch all the data on my Google Drive.
It looks like the audio and video preview can't seek, so you need to listen/watch from the beginning.
I'm still looking for a solution for this.
I don't have Google Shared Drive, so I can't test it and implement it.
Implemented by @loadingthedev (PR #4)
For now, I don't have any plan to implement this, because I think it's not necessary.
All Google Drive files like Docs, Sheets, and Slides are hidden from the list.
PR are welcome if you want to implement this.
If you're upgrading from version 1.x to version 2, there are some changes that you need to do:
You can check the new Configuration Schema on
/src/schema.ts
There are some changes on the configuration file, here's the list of changes:
-
masterKey
REMOVED, we don't need this anymore -
apiConfig.rootFolder
CHANGED, you need to encrypt the folder ID on your localhost first
http://localhost:3000/api/internal/encrypt?q={{ folderId }}
-
apiConfig.proxyThumbnail
ADDED, default value istrue
-
siteConfig.siteNameTemplate
ADDED, default value is%s - next-gdrive-index
-
siteConfig.siteAuthor
ADDED, default value ismbahArip
-
siteConfig.robots
ADDED, default value isnoindex, nofollow
-
siteConfig.footer
ADDED, default value isPowered by next-gdrive-index
-
siteConfig.defaultAccentColor
REMOVED, you can set the theme from/src/app/globals.css
(more information about shadcn/ui theme) -
siteConfig.breadcrumbMax
ADDED, default value is3
-
siteConfig.toaster
ADDED, default value is{ position: "bottom-right', duration: 3000 }
-
siteConfig.navbarItems[number].icons
CHANGED, you need to use Lucide Icons now -
siteConfig.supports
ADDED, you can leave it empty if you don't want to use it
Now all the environment variable are on the server side, so you need to change the environment variable:
NEXT_PUBLIC_ENCRYPTION_KEY
CHANGED toENCRYPTION_KEY
NEXT_PUBLIC_SITE_PASSWORD
CHANGED toSITE_PASSWORD
NEXT_PUBLIC_VERCEL_URL
CHANGED toNEXT_PUBLIC_DOMAIN
If you think I deserve it, you can support me by: